Html 我的图片应该是什么尺寸的移动网站

What size should my images be for a mobile site

提问by multimediaxp

We are designing a template for a mobile site and we got to the problem where we don't know what size a logo should be, or the background, etc.

我们正在为移动网站设计模板，但遇到了一个问题，即我们不知道徽标的大小或背景等。

We will use the Jquery mobile API and HTML5 / CSS3 which basically allows us to create the whole architecture of the site without worrying about the dimensions, but in terms of external assets like backgrounds and images we don't know what is the best size in order to be more compatible with most devices.

我们将使用 Jquery 移动 API 和 HTML5/CSS3，这基本上允许我们创建网站的整个架构而无需担心尺寸，但是对于背景和图像等外部资产，我们不知道什么是最佳尺寸以便与大多数设备更兼容。

回答by Blazemonger

The iPhone 4S/5 has a high-resolution screen that's 640 pixels wide. Many Android smartphones top out at 720px wide, although some go up to 800px. Anything over that is probably considered a tablet.

iPhone 4S/5 拥有 640 像素宽的高分辨率屏幕。许多 Android 智能手机的最高宽度为 720 像素，尽管有些高达 800 像素。超过此范围的任何内容都可能被视为平板电脑。

The best thing you can do as far as wide compatibility, then, is a single CSS style:

就广泛的兼容性而言，您可以做的最好的事情是单一的 CSS 样式：

img { max-width: 100%; height: auto; }

This will ensure that no matter what resolution the screen is, your images will be no larger than the element containing it. (When building a responsive site with mobile users in mind, your element widths, margins and padding should all be computed as percentages whenever possible.) Obviously it also means that you're downloading more image data than many phones will need, but if you're dealing with two-color logos, it's not much of a difference. As always, keep your images as few and as small as possible.

这将确保无论屏幕的分辨率如何，您的图像都不会大于包含它的元素。（在为移动用户构建响应式网站时，您的元素宽度、边距和内边距都应尽可能按百分比计算。）显然，这也意味着您下载的图像数据比许多手机需要的要多，但如果您正在处理两种颜色的徽标，这没什么区别。与往常一样，尽可能少地保留图像。

In addition, if you're not dealing with photos, you should look at SVG images. Since they're vector-based, they resize perfectly at any resolution, and they're compatible with pretty much every browser except IE8 and Android 2.x.

此外，如果您不处理照片，则应该查看 SVG 图像。由于它们是基于矢量的，因此它们可以在任何分辨率下完美地调整大小，并且它们几乎与除 IE8 和 Android 2.x 之外的所有浏览器兼容。

回答by Developer

I am sure that the image size normally should not be more like it defines CSS media query standart.

我确信图像大小通常不应该更像它定义的 CSS 媒体查询标准。

This is a short list of CSS media query for the most popular devices of 2015-2016.

这是 2015-2016 年最流行设备的 CSS 媒体查询的简短列表。

Just add into this list media quieres for new devices if you need.

如果需要，只需将新设备的媒体 quieres 添加到此列表中。

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

And also take a look at the older lists https://css-tricks.com/snippets/css/media-queries-for-standard-devices/and https://gist.github.com/hs0ucy/3762901

并查看旧列表https://css-tricks.com/snippets/css/media-queries-for-standard-devices/和https://gist.github.com/hs0ucy/3762901

回答by Chris Conway

Consider following html code:

考虑以下 html 代码：

<img src="images/myimage.jpg" alt="image">

Taking a look at that example, we would need multiple images depending on the screen size. As most browsers look at the HTML document first and preload images before they load Javascript, Javascript wouldn't be a perfect solution.

看看那个例子，根据屏幕大小，我们需要多个图像。由于大多数浏览器在加载 Javascript 之前先查看 HTML 文档并预加载图像，因此 Javascript 不是一个完美的解决方案。

That's why: use a responsive image server!

这就是为什么：使用响应式图像服务器！

I've used Sencha.io Src, which will figure out the device screen and shrink (it onlyshrinks images) your image to fit its screensize constraints. Sencha.io uses the browsers useragent string to look up the device in it's database. Than it shrinks your image to the maximum width of your device and stores it in a cache which will be available for 30 minutes.

我使用过Sencha.io Src，它将计算出设备屏幕并缩小（它只缩小图像）您的图像以适应其屏幕尺寸限制。Sencha.io 使用浏览器的用户代理字符串在其数据库中查找设备。然后它将您的图像缩小到设备的最大宽度并将其存储在缓存中，该缓存将可用 30 分钟。

Use it like that:

像这样使用它：

<img src="http://src.sencha.io./http://[your domain and path]/images/myimage.jpg" alt="image">

PS: It also has it shortcomes: it relies on device detection and requires you to route all your images through a third party. But as they are no great solutions at the moment (even with media queries you'll have to deal with browsers, which download resources inside a media query that doesn't apply) - I hope that this will help you out!

PS：它也有它的缺点：它依赖于设备检测，并且需要您通过第三方路由所有图像。但是由于它们目前还不是很好的解决方案（即使使用媒体查询，您也必须处理浏览器，这些浏览器会在不适用的媒体查询中下载资源） - 我希望这会对您有所帮助！

回答by John Skoumbourdis

You have to use CSS media queries for this. Take a look of this article here: http://davidwalsh.name/image-max-width

为此，您必须使用 CSS 媒体查询。在此处查看这篇文章：http: //davidwalsh.name/image-max-width

/* iphone */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
      img { max-width: 100%; }
}

/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
      img { max-width: 100%; }
}