Question

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

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

Answer 1

iPhone 4S / 5的高分辨率屏幕宽640像素。许多Android智能手机的最大宽度为720px，但有些则高达800px。任何东西都可能被视为平板电脑。

就广泛的兼容性而言，你可以做的最好的事情就是单一的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使用浏览器useragent字符串在其数据库中查找设备。比它将图像缩小到设备的最大宽度，并将其存储在缓存中，该缓存将在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%; }
}

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

4 个答案: