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

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，则以我指定的尺寸显示图片。

由于有很多手机使用相同的媒体查询宽度和高度，我想我将只对我在这里找到的所有机器人和 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

来自 Link(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 专有的，但同时得到更多移动浏览器的支持，实际上使布局视口完全适合设备。

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

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

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

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

Answer 2

听起来你有点过头了。我不会为每个 phone 尺寸制作一个。查看开发中的哪个点。工具开始对您的布局产生影响。然后将您的查询最大值设置为该值。像这样

@media only screen and (max-width: 500px) {

在 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

了解有关查询的更多信息

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

How to use media Queries for Hybrid applications

html

css

android

ios

media-queries

Read This First(1)