使用CSS3的媒体查询时的移动Safari重熔错误

我正在开发一个可在iPad的Mobile Safari和标准PC浏览器上进行可视化的网站。在这个页面基本上使用CSS3的媒体查询时的移动Safari重熔错误

 

    @media only screen and (max-width: 980px), only screen and (max-device-width: 1185px) { 
     #galleria { 
     margin-left:5%; 
     margin-top:15%; 
     } 
    } 

    @media only screen and (max-width: 1185px), only screen and (max-device-width: 980px) { 
     #galleria { 
     margin-left:16%; 
     margin-top:15%; 
     } 
    }

这种方法的工作原理，但是当我转动我的设备，虫子出来：要适应我的布局（尤其是在手机浏览器，我使用这个CSS3媒体查询。有一个名为“标志”表示的图像，下面是它的CSS：

 

    #logo { 
     position:absolute; 
     top:30px; 
     left:26%; 
    } 

    #logo img { 
     width:75%; 
    }

此图片每次我旋转设备的时间，变得更小我怎样才能避免这种错误感谢所有的？答案！

来源

2013-02-14 PeppeLaKappa

你使用什么元视口？ – mddw 2013-02-14 13:11:31

– PeppeLaKappa 2013-02-14 13:12:56

这可能是着名的方向错误（http://webdesignerwall.com/教程/ iphone-safari-viewport-scaling-bug/comment-page-1）你能否提供一个例子或截图？ – mddw 2013-02-14 13:15:01

由于您使用的是基于百分比的宽度，因此它不会变得越来越小，屏幕变得越来越大......它的比例并没有改变......就是说，如果您不希望它改变大小，代码的像素大小，而不是百分比大小......或者你可以让JavaScript计算百分比并将其转换为像素大小，然后将其作为变量加载，因此一旦屏幕旋转，它将不会更新为新的（“较小的幻觉”）大小。

来源

2013-02-14 13:07:10

您可以更具体吗？ – PeppeLaKappa 2013-02-14 13:59:35

刚才在你的评论中看到你上传的照片后，我不知道是什么原因造成的，我不知道它会不断缩小！太疯狂了！祝你好运！ – 2013-02-14 14:02:41

使用CSS3的媒体查询时的移动Safari重熔错误

回答

相关问题