iOS 7中的媒体查询无法正常工作 [英] Media queries in iOS 7 not working

问题描述

我正在使用一些媒体查询，这些查询以横向和纵向为目标定位iPad和iPhone，但从iOS 7开始，它们不再起作用了。但是，它们在iOS 6中完美运行。有没有人有类似的经历？

I'm using a couple of media queries that target iPad and iPhone in landscape as well as portrait orientation, but as of iOS 7 they don't work anymore. They worked perfectly in iOS 6, though. Has anyone had a similar experience?

这是我正在使用的代码的一部分：

Here's part of the code I'm using:

<style type="text/css">
/* iPad (landscape) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
.header {
font-family: courier new, monospace;
color: #999999;
font-size: 14pt;
line-height: 104%;
width: 37.5em; }
.action {  
font-family: courier new, monospace;
color: #999999;
font-size: 14pt;
line-height: 104%;
width: 37.5em; }
.character {  
font-family: courier new, monospace;  
color: #999999;
font-size: 14pt;
line-height: 104%;
padding-left: 12.25em;
width: 21em; }
.dialogue {
font-family: courier new, monospace;  
color: #999999;
font-size: 14pt;
line-height: 104%;
padding-left: 6.15em;
width: 22em; }
.info {  
display: none; }}
/* iPad (portrait) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
.header {
font-family: courier new, monospace;
color: #999999;
font-size: 12pt;
line-height: 104%;
width: 37.15em; }
.action {  
font-family: courier new, monospace;
color: #999999;
font-size: 12pt;
line-height: 104%;
width: 37.15em; }
.character {  
font-family: courier new, monospace;  
color: #999999;
font-size: 12pt;
line-height: 104%;
padding-left: 12em;
width: 21em; }
.dialogue {
font-family: courier new, monospace;  
color: #999999;
font-size: 12pt;
line-height: 104%;
padding-left: 6em;
width: 22em; }
.info {  
display: none; }}
</style>

推荐答案

是否可以粘贴您尝试使用的媒体查询实现iPad唯一的选择。我遇到了同样的问题，但发现我偶然添加了文本，这导致我的一个查询没有正确关闭。在iPad查询之前，请确保已关闭所有媒体查询和属性。下面是我用来确定iPad和方向的两个查询的示例：

Could you paste the media query you are trying to use to achieve the iPad only selection. I was having the same problem but noticed I had added text by accident that was causing one of my queries to not close correctly. Make sure all of your media queries and properties have been closed prior to your iPad query. Below is an example of the two queries I use to determine iPad and orientation:

@media only screen and（min-device-width：768px）and（max-device -width：1024px）和（orientation：portrait）{}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

或

@media only screen and（ min-device-width：768px）和（max-device-width：1024px）和（orientation：landscape）{}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){}

我在多个响应式设计中使用了这些我已经创建并且它们在iOS6和iOS7上都能正常工作。再次，只需检查您的代码。可能是你俯瞰的东西很简单。希望这会有所帮助。

I have used these on multiple responsive designs I have created and they work correctly on both iOS6 and iOS7. Again, just checkout your code. May be your overlooking something quite simple. Hope this helps.

这篇关于iOS 7中的媒体查询无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！