在移动设备中响应式工作有所不同吗？

问题描述：

只是为了实验的目的，我配置了以下media query：在移动设备中响应式工作有所不同吗？

@media only screen and (max-width: 600px) { 
     .fontresize { font-size: 3em; } 
    } 


    <table style="width: 100%;" border="0"> 
    <tbody> 
     <tr> 

     <td width="50%"><a href="food.html" class="fontresize">Food</a></td> 
     <td width="50%"><a href="candles.html" class="fontresize">Candles</a></td> 

     </tr> 
    </tbody> 
    </table>

当我缩了Chrome浏览器窗口的宽度这部作品桌面版Chrome罚款。当网页加载完毕后到我的服务器，并打开它的Chrome浏览器在我的iPhone 4S在肖像模式

：

但是，它并没有在下列2分的情况下工作。
当我右键单击页面中的Chrome，然后选择“检查”，然后选择“切换装置”（从开发工具），并选择任意手机的各种肖像模式。尽管所有的手机模式都在600px以下，

是什么给出的？

答

这工作正常的桌面Chrome缩小了Chrome浏览器窗口的宽度。当网页加载完毕后到我的服务器，并打开它在Chrome浏览器中我的iPhone 4S在肖像模式

：

但是，它并没有在下列2分的情况下工作。

当你有这样的症状，要检查的第一件事是，你必须在你的文档的头部视meta标签

<html> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
.... 
</head>

祝你好运

答

对于iPhone（4S，5和5秒，6,6加）纵向媒体查询像下面

@media only screen and (max-device-width : 667px) and (orientation : portrait) 
{ 
.fontresize { font-size: 3em; } 
}

也使用this链接，iPhone媒体查询

在移动设备中响应式工作有所不同吗？

相关推荐