对于移动网站，我的图片应该是什么尺寸

Question

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

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

Answer 1

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

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

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

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

此外，如果您不处理照片，则应该查看 SVG 图像。由于它们是基于矢量的，因此它们可以在任何分辨率下完美调整大小，they're compatible with pretty much every browser except IE8 and Android 2.x。

Answer 2

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

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

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

/* 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 */
}

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

Answer 3

考虑以下 html 代码：

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

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

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

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

像这样使用它：

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

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

Answer 4

您必须为此使用 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%; }
}