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

Posted 2023-03-06

【中文标题】如何为混合应用程序使用媒体查询

【英文标题】：How to use media Queries for Hybrid applications

【发布时间】：2016-01-25 03:48:46

【问题描述】：

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

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

因此，我使用的是 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/

我走对了吗？

提前谢谢你

【参考方案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 上至少为 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）像素；因此 width: 1in 在我迄今为止测试的所有浏览器上都等于 96 像素（这还不少）。所以这些媒体查询是不可靠的。

<meta> 标签

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

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

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

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

这可能不是你想要的。您希望将文本很好地适应屏幕。这就是<meta name="viewport" width="device-width"> 的任务。添加后，布局视口会缩小（在 iPhone 的情况下为 320 像素），并且文本适合。

【讨论】：

谢谢，今天晚些时候我会仔细阅读。

@user5487851 总是乐于提供帮助:)

【参考方案2】：

听起来你有点过分了。我不会为每种手机尺寸制作一个。看看 dev 中的什么时候。工具它开始对您的布局产生影响。然后将您的查询最大值设置为该值。像这样

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

通过http://www.w3schools.com/cs-s-ref/css3_pr_mediaquery.asp了解有关查询的更多信息