Read This First ...（1）

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工作。

媒体查询

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

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）像素;因此宽度：在我测试的所有浏览器中，1英寸等于96像素（这是相当多的）。所以这些媒体查询是不可靠的。

<meta>代码

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

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

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

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

这可能不是你想要的。您希望在屏幕上很好地拟合文本。这是<meta name="viewport" width="device-width">的任务。添加时，布局视口已缩小（如果是iPhone，则为320px），文本适合。

Answer 2

听起来好像你把它拿得太远了。我不会为每个手机大小制作一个。看看开发中的什么点。工具开始改变你的布局。然后将查询max设置为该值。喜欢这个

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

了解有关http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

的查询的详情

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

2 个答案:

Read This First ...（1）