“全网"移动浏览器和基于屏幕大小的媒体查询 [英] "Full web" mobile browsers and screen-size media queries based
问题描述
有人要求我用移动版式来改造现有网站.该网站建立在Wordpress Twenty11框架上，因此我决定使用该框架中现有的媒体查询来构建移动版式.
I've been asked to retrofit an existing website with a mobile layout. The website was built on a Wordpress Twenty11 framework, so I decided to build the mobile layout using the existing media queries in that framework.
现在，我的移动设备布局在任何向下拖动的宽度小于420像素的桌面浏览器上都很好，但在iPhone& Android移动浏览器无论如何都只是加载全角网页.完整的网络体验，加油！
Now, my mobile layout looks great on any desktop browser dragged down to be less than 420px wide, but on iPhone & Android mobile browsers it just loads the full-width webpage anyhow. Full web experience, woot!
客户不满意.希望将移动设计显示在所有iPhone浏览器上.因此，现在我需要弄清楚为什么移动浏览器坚持在整个桌面宽度上显示页面，而完全忽略了移动CSS.
Client unhappy. Wants mobile design to show up on all iPhone browsers. So now I need to work out why the mobile browsers insist on showing the page at the full desktop width, ignoring the mobile CSS entirely.
这是我的媒体查询，位于style.css主文档的底部:
Here's my media queries, down the bottom of the main style.css document:
@media (max-width: 800px) {
/* Design starts to get a little more fluid */
}
@media (max-width: 650px) {
/* Design gets quite a lot more fluid, and columns start dropping off the edge to below main content */
}
@media (max-width: 450px) {
/* Totally changed navigation for small viewports, main content takes up whole viewport */
}
当我在台式机上手动调整浏览器窗口的大小时，所有这些都可以满足我的要求.当我在几乎没用的基于iFrame的"iPhone模拟器"中对它们进行测试时，它们也可以满足我的要求.但是到目前为止，所有经过测试的移动设备都顽固地显示了全角布局，放大后的确很远并且不可读.
All of these do what I want when I manually resize a browser window on a desktop machine. They also do what I want when I test them in next-to-useless iFrame-based "iPhone emulators". But all mobile devices so far tested stubbornly show the full-width layout, zoomed really far out and unreadable.
我是否应该在这些媒体查询中添加一些内容，以使移动浏览器显示移动CSS?还是应该完全采用其他策略，例如用户代理检测或类似策略?
Is there something I should be adding to those media queries to MAKE the mobile browsers display the mobile CSS? Or should I be going with a different strategy altogether, such as user-agent detection or similar?
已编辑以添加: 我猜是header.php中的这一行:
EDITED TO ADD: Something like this line in header.php, I am guessing:
<meta name="viewport" content="width=960,
maximum-scale=1.0">
实际上应该是
<meta name="viewport" content="width=device-width,
maximum-scale=1.0">
对吗?
推荐答案
您应在媒体查询中添加min-width参数，因为当前屏幕较小的人将从所有三个媒体查询中获取规则，因为最大宽度将小于800px.
You should add min-width parameters to your media queries because at the moment someone with a small screen will be getting rules from all three of your media queries since it's max width will be less than 800px.
@media (min-width: 651px AND max-width: 800px) {
...
}
@media (min-width: 451px AND max-width: 650px) {
...
}
@media (max-width: 450px) {
...
}
如果您尝试通过媒体查询变得过于复杂，则会遇到很多问题.不同的浏览器对它们的处理方式不同，使它们对于生产环境而言不够理想.
If you attempt to get too complex with media queries you'll run into tons of problems. Different browsers handle them differently making them less than ideal for a production environment.
我想使用的一种方法是为window.resize事件创建一个简单的JS事件处理程序，该事件处理程序仅向<html>元素中添加一个类以指定用户所在的屏幕中断点.然后在您的CSS中，您只需为规则添加断点类前缀即可.
A method that I like to use is to create a simple JS event handler for the window.resize event that only adds a class to the <html> element to specify what screen-break-point the user is at. Then in your CSS you just prefix rules with the breakpoint-classes:
$(window).on('resize', function () {
var w = $(this).width();
if (w > 1400) {
$('html').addClass('widescreen-viewport');
} else if (w > 1024) {
$('html').addClass('desktop-viewport');
} else if (w > 767) {
$('html').addClass('tablet-viewport');
} else {
$('html').addClass('mobile-viewport');
}
});
对不起jQuery，但这是我所确定的肯定方法.
Sorry for the jQuery but this is a way I know works for sure.
然后您的CSS类似于:
Then your CSS would be something like:
#some-element {
/*default styles*/
}
.widescreen-viewport #some-element {
/*widescreen styles*/
}
.desktop-viewport #some-element {
/*desktop styles*/
}
.tablet-viewport #some-element {
/*tablet styles*/
}
.mobile-viewport #some-element {
/*mobile styles*/
}
此方法将获得更好的浏览器支持，因为它需要启用JS，但除此之外，它将从那时起可以在IE6/5.5和其他浏览器中使用.
This method will receive better browser support as it requires JS to be enabled but other than that, it'll work back to IE6/5.5 and other browsers from that time.
这篇关于“全网"移动浏览器和基于屏幕大小的媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
