在Nexus 7 2013上更改方向时CSS媒体查询不起作用 [英] CSS media queries not working when changing orientation on Nexus 7 2013
问题描述
我目前正在我的笔记本电脑，台式机和Nexus 7 2013上测试CSS媒体查询.除Nexus 7以外，它们都可以在台式机和笔记本电脑上正常工作.当我更改方向时，除非刷新页面，否则样式将不适用.例如:将设备保持为纵向模式时，页面很好.当我将其以横向模式打开时，页面会中断.但是，当我刷新页面时，它将加载横向样式.我不确定自己在做什么错.
I'm currently testing CSS media queries on my laptop, desktop PC and Nexus 7 2013. They all work fine on the desktop and laptop, except Nexus 7. When I change orientation the styles do not apply, unless I refresh the page. For example: When holding the device in portrait mode, the page is fine. When I turn it in landscape mode, the page breaks. When I refresh the page however, it loads the landscape styles. I'm not sure what I'm doing wrong.
这是我的代码:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Title</title>
<link rel="stylesheet" media="screen" href="styles.css">
<body>
Content goes here!
</body>
</html>
CSS:
/*iPhone PORTRATE*/
@media screen and (max-width:321px) and (min-width:3px){
html{background-color:yellow;}}
/*iPhone LANDSCAPE*/
@media screen and (max-width:480px) and (min-width:322px){
html{background-color:cyan;}}
/*533px*/
@media screen and (max-width:533px) and (min-width:481px){
html{background-color:pink;}}
/*iPhone 5 LANDSCAPE*/
@media screen and (max-width:568px) and (min-width:534px){
html{background-color:green;}}
/*Resolutions bellow 800px must be tested on specific devices*/
/*600 px - Nexus 7 2013 portrait*/
@media only screen and (max-device-width : 600px) and (min-device-width : 569px) and (orientation : portrait){
html{background-color:orange;
}}
/*960 px - Nexus 7 2013 Landscape*/
@media only screen and (max-device-width : 960px) and (min-device-width : 601px) and (orientation: landscape){
html{background-color:red;
}}
/*Desktop and laptop*/
/*800px*/
@media screen and (max-width:800px) and (min-width:601px){
html{background-color:grey;
}}
/*1024px*/
@media screen and (max-width:1024px) and (min-width:961px){
html{background-color:black;
}}
/*1152px */
@media screen and (max-width:1152px) and (min-width:1025px){
html{background-color:blue;
}}
/*1280px*/
@media screen and (max-width:1280px) and (min-width:1153px){
html{background-color:brown;
}}
/*1366px*/
@media screen and (max-width:1366px) and (min-width:1281px){
html{background-color:black;
}}
/*1440px*/
@media screen and (max-width:1440px) and (min-width:1367px){
html{background-color:purple;
}}
/*1600px*/
@media screen and (max-width:1600px) and (min-width:1441px){
html{background-color:lime;
}}
/*1776px*/
@media screen and (max-width:1776px) and (min-width:1601px){
html{background-color:silver;
}}
/*1920px*/
@media screen and (max-width:1920px) and (min-width:1777px){
html{background-color:chocolate;
}}
推荐答案
我更喜欢仅使用最大宽度"和最小宽度"，因为这是针对视口而不是设备.这样，当您旋转设备时，视口就会改变，加载的媒体查询也会改变.
I prefer using only "max-width" and "min-width", because this targets the Viewport, not the device. That way, when you rotate the device, the viewport changes, so will the loaded media query.
我还相信您有太多的媒体查询，并且其中有些可能会造成干扰.
Also I believe you have way too many media queries, and probably some of them are interfering.
忘记各种类型的设备，只考虑分辨率.如今，您不知道1024px设备是高端手机，普通平板电脑还是小型台式机.或者，如果768是平板电脑纵向或手机横向模式.
Forget about the different types of devices, think only of resolutions. Nowadays you dont know if 1024px device is a high end phone, regular tablet, or small desktop. Or if 768 is tablet portrait or phone landscape.
具有更少的断点，并确保您的设计适合每个媒体查询的最低部分.例如，在进行320-480媒体查询时，请在320px上进行测试，如果合适，则也可以很好地匹配479px.
Have fewer breakpoints, and make sure that your design fits in the lowest part of each media query. For example, when making the 320-480 media query, test on 320px, if it fits good, it will also fit in 479px nicely.
您的断点应该是0-319320-479480-767768-989990-1200也许有1600+和1900 +
your breakpoints should be 0 - 319 320-479 480-767 768-989 990-1200 and maybe some for 1600+ and 1900+
使用这些刹车点制作了很多响应式网站，并且它们在任何设备上都非常出色.
Made quite a few responsive websites using these brakepoints, and they all work awesome on any device.
这篇关于在Nexus 7 2013上更改方向时CSS媒体查询不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
