android - 如何为混合应用程序使用媒体查询

Question

我想在页面中的每个设备上显示我的所有图片，而无需向下滚动以查看我的混合应用程序。

我了解到，由于存在不同的屏幕尺寸，我应该使用媒体查询。

因此我在 iPhone 4 上使用类似这样的东西:

@media only screen

and (min-width : 320px)
and (min-height : 480px) 
and (max-width : 320px)
and (max-height : 480px) 
{ 
Content
}

因此，如果它是 Iphone 5，请以我指定的尺寸显示图片。

由于有很多手机使用相同的媒体查询宽度和高度，我想我将只对我在这里找到的所有 android 和 ios 设备执行此操作:http://www.canbike.org/CSSpixels/

我走在正确的轨道上吗？

提前致谢

Answer 1

Read This First (1)

---

然后阅读此媒体

/* For lower than 700px resolutions */
@media (max-width: 700px) { ... }
/* Same as last but with the device orientation on land scape */
@media (max-width: 700px) and (orientation: landscape) { ... }
/* Including width and orientation you can add a media type clause,
   in this case 'tv' */
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
/* for low resolution display with background-image */
.image {
    background-image: url(/path/to/my/image.png);
    background-size: 200px 300px;
    height: 300px;
    width: 200px;
}
/* for high resolution (Retina) display with background-image */
@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    -repeat;
        background-size: 200px 400px;
    /* rest of your styles... */
    }
}

---

了解Developing Mobile Web Apps: When, Why, and How

---

来自链接的一些有用数据(1)

棘手的部分

但是，有两个棘手的问题:设备宽度媒体查询和 <meta name="viewport" width="device-width">标签。两者都使用设备像素，而不是 CSS 像素，因为它们报告的是网页的上下文，而不是其内部 CSS 工作原理。

媒体查询

设备宽度媒体查询以设备像素为单位测量设备的宽度。 width 媒体查询以 CSS 像素为单位测量页面的总宽度，出于稍后解释的原因，在 iPhone 上至少为 980px。

div.sidebar {
    width: 300px;
}

@media all and (max-device-width: 320px) {
    // styles assigned when device width is smaller than 320px;
    div.sidebar {
        width: 100px;
    }

}

现在侧边栏的宽度为 300 CSS 像素，除非设备宽度为 320 设备像素或更小，在这种情况下它变为 100 CSS 像素宽。 (你还跟着？这很复杂。)

顺便说一下，理论上您可以使用以厘米或英寸为单位查询设备屏幕的媒体查询 (@media all and (max-device-width: 9cm)) .不幸的是，它似乎完全不受支持，即使是 iPhone。这里的问题是物理单位(例如英寸)通常会转换为 (CSS) 像素；因此 width: 1in 在我目前测试过的所有浏览器上都等于 96 像素(而且相当多)。所以这些媒体查询是不可靠的。

<meta>标记

一般来说更有用。这个标签最初是 Apple 专有的，但同时得到更多移动浏览器的支持，实际上使布局视口(viewport)完全适合设备。

什么是布局视口(viewport)？它是浏览器用来计算具有百分比宽度的元素尺寸的区域(以 CSS 像素为单位)，例如 div.sidebar {width: 20%}。它通常比设备屏幕大很多:iPhone 上为 980px，Opera 上为 850px，Android 上为 800 等。

如果添加 <meta name="viewport" width="device-width"> ，此布局视口(viewport)的宽度被限制为以设备像素为单位的设备宽度； iPhone 的外壳中有 320 个。

如果您的页面足够窄以适应屏幕，这很重要。在没有任何 CSS 宽度声明和 <meta> 的情况下获取此页面标签。它延伸到布局视口(viewport)的整个可用宽度。

这可能不是您想要的。你想在屏幕上很好地适应文本。这就是<meta name="viewport" width="device-width">的任务.当您添加它时，布局视口(viewport)会收缩(在 iPhone 的情况下为 320 像素)，并且文本适合。