android - 如何为混合应用程序使用媒体查询
<p><p>我想在页面中的每台设备上显示我的所有图片，而无需向下滚动以查看我的混合应用程序。</p>
<p>我学到的是，由于存在不同的屏幕尺寸，我应该使用媒体查询。</p>
<p>因此，我使用的是 iPhone 4，例如:</p>
<pre><code>@media only screen
and (min-width : 320px)
and (min-height : 480px)
and (max-width : 320px)
and (max-height : 480px)
{
Content
}
</code></pre>
<p>因此，如果是 Iphone 5，请以我指定的尺寸显示图片。 </p>
<p>由于有很多手机使用相同的媒体查询宽度和高度，我想我将为我在此处找到的所有 android 和 ios 设备执行此操作:<a href="http://www.canbike.org/CSSpixels/" rel="noreferrer noopener nofollow">http://www.canbike.org/CSSpixels/</a> </p>
<p>我走对了吗？</p>
<p>提前谢谢你</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><h1> <a href="http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html" rel="noreferrer noopener nofollow">Read This First</a> (1)</h1>
<hr/>
<p>然后阅读此媒体</p>
<pre><code>/* 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... */
}
}
</code></pre>
<hr/>
<p>了解<a href="http://www.toptal.com/android/developing-mobile-web-apps-when-why-and-how" rel="noreferrer noopener nofollow">Developing Mobile Web Apps: When, Why, and How</a> </p>
<hr/>
<p>链接中的一些有用数据(1)</p>
<p><strong>棘手的部分</strong></p>
<p>但是，有两个棘手的地方:设备宽度媒体查询和 <code><meta name="viewport"width="device-width"></code> 标签。两者都适用于设备像素，而不适用于 CSS 像素，因为它们报告的是网页的上下文，而不是其内部 CSS 工作原理。</p>
<p><strong>媒体查询</strong></p>
<p>设备宽度媒体查询以设备像素为单位测量设备的宽度。 width 媒体查询以 CSS 像素为单位测量页面的总宽度，原因我稍后会解释，在 iPhone 上至少为 980 像素。</p>
<p> <a href="/image/Y4rFp.jpg" rel="noreferrer noopener nofollow"><img src="/image/Y4rFp.jpg" alt="enter image description here"/></a> </p>
<pre><code>div.sidebar {
width: 300px;
}
@media all and (max-device-width: 320px) {
// styles assigned when device width is smaller than 320px;
div.sidebar {
width: 100px;
}
}
</code></pre>
<p>现在侧边栏的宽度为 300 CSS 像素，除非设备宽度为 320 设备像素或更小，在这种情况下，它变为 100 CSS 像素宽。 (你还跟着？这很复杂。)</p>
<p>顺便说一句，理论上您可以使用媒体查询来以厘米或英寸为单位查询设备屏幕<code>(@media all and (max-device-width: 9cm))</code>。不幸的是，即使是 iPhone 也完全不支持它似乎很糟糕。这里的问题是英寸等物理单位通常转换为(CSS)像素；因此 width: 1in 在我迄今为止测试的所有浏览器上都等于 96 像素(这还不少)。所以这些媒体查询是不可靠的。</p>
<p><strong><code><meta></code> 标签</strong></p>
<p>一般来说更有用。这个标签最初是 Apple 专有的，但同时被更多的移动浏览器支持，实际上使布局视口(viewport)完全适合设备。</p>
<p>现在什么是布局视口(viewport)？它是浏览器用来计算具有百分比宽度的元素尺寸的区域(以 CSS 像素为单位)，例如 div.sidebar {width: 20%}。它通常比设备屏幕大很多:iPhone 为 980px，Opera 为 850px，Android 为 800，等等。</p>
<p> <a href="/image/kcn2K.jpg" rel="noreferrer noopener nofollow"><img src="/image/kcn2K.jpg" alt="enter image description here"/></a> </p>
<p>如果添加 <code><meta name="viewport"width="device-width"></code>，则此布局视口(viewport)的宽度会被限制为设备宽度(以设备像素为单位)；其中 320 个在 iPhone 的情况下。</p>
<p>如果您的页面足够窄以适合屏幕，这很重要。在没有任何 CSS 宽度声明和 <code><meta></code> 标记的情况下获取此页面。它延伸到布局视口(viewport)的整个可用宽度。</p>
<p> <a href="/image/OINcd.jpg" rel="noreferrer noopener nofollow"><img src="/image/OINcd.jpg" alt="enter image description here"/></a> </p>
<p>这可能不是你想要的。您希望将文本很好地适应屏幕。这就是 <code><meta name="viewport"width="device-width"></code> 的任务。添加后，布局视口(viewport)会缩小(在 iPhone 的情况下为 320 像素)，并且文本适合。</p>
<p> <a href="/image/lntL1.jpg" rel="noreferrer noopener nofollow"><img src="/image/lntL1.jpg" alt="enter image description here"/></a> </p></p>
<p style="font-size: 20px;">关于android - 如何为混合应用程序使用媒体查询，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/33339082/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/33339082/
</a>
</p>
页:
[1]