使用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重熔錯誤

回答

相關問題