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

Question

我们正在为移动网站设计一个模板，我们遇到了一个问题，即我们不知道徽标应该是什么尺寸或背景等。

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

Answer 1

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

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

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

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

此外，如果您不处理照片，则应该查看 SVG 图像。由于它们是基于矢量的，因此它们可以在任何分辨率下完美调整大小，并且它们与几乎所有浏览器兼容，除了 IE8 和 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%; }
}