移動Safari瀏覽器沒有迴流調整大小 - 錯誤行爲

編輯2這個問題是尋找一個平滑，乾淨的方式在iPhone上迴流文本。移動Safari瀏覽器沒有迴流調整大小 - 錯誤行爲

根據方向改進一個Web應用程序，使其具有2種不同的寬度（320 & 480）。其目的還在於可用於非移動（即> 480寬）屏幕。它主要按照需要工作，除了頁面在橫向更新時。這會導致佈局回到320（在左側）並在右側留下黑條。

負載在肖像

1. Portrait (after load)

旋轉爲橫向

2. Landscape (after rotate)

刷新景觀

3. Landscape (after refresh)

它採用旋轉爲縱向和背部得到調整和圖像2一次。這對我來說是一個可用性問題。頁面大小調整&在Android上旋轉很好，在桌面上爲「全尺寸」。

任何人都知道我錯過了什麼？我已經嘗試了很多次迭代，並閱讀了幾個bug解決方案。沒有任何想法正在改變結果。關於提交bugreport。我有一個預感它是在媒體查詢#container的行。

編輯：該網站是爲移動（320寬）建成的。當空間可用時，希望擴大空間的使用。主要目的是讓文本&元素重排。查看照片，注意輸入字段與其標籤的對齊。

我已經嘗試了2種方法來完成這項工作。其他的是使用JavaScript來改變＃容器寬度。目前在內聯樣式表的最後使用以下媒體查詢。我更喜歡用媒體查詢來解決這個問題。

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <meta name="HandheldFriendly" content="True"> 
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <title>The Title</title> 
    <style type="text/css"> 
     html { 
      margin: 0; 
      padding: 0; 
     } 
     body { 
      font: 14px Verdana, Geneva, Arial, Helvetica, sans-serif; 
     } 
     #container { 
      margin: auto; 
      width: 480px; 
     ..... 
     @media screen and (max-width: 480px) { 
      body { 
       -webkit-text-size-adjust: none; 
      } 
      #container { 
       max-width: 480px !important; 
       width: 100% !important; 
      }  
     } 
     @media screen and (max-width: 320px) { 
      body { 
       -webkit-text-size-adjust: none; 
      } 
      #container { 
       max-width: 320px !important; 
       width: 100% !important; 
      }  
     } 
    </style> 
     .....

來源

2012-06-11 David

我只是沒有說明寬度或高度。當你這樣做時，它自動設置爲當前resotion – Sirens

@TheDeveloper你是什麼意思的'沒有說明寬度或高度'？我希望頁面寬度爲縱向320，橫向480和**，以設置內容以及我想要的內容。 – David

取得突破。經過幾十個變化中的媒體查詢，該代碼已經「破」的問題：

function orientation_change() { 
    if (window.orientation == 0 || window.orientation == 180) 
     document.getElementById("viewport").setAttribute("content", "width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=no"); 
    else if (window.orientation == -90 || window.orientation == 90) 
     document.getElementById("viewport").setAttribute("content", "width=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no");  
}

有：

<body onload="orientation_change();" onorientationchange="orientation_change();">

原題的媒體查詢還包括了迴流文本當發生旋轉時。但刷新部分黑屏問題消失了。找到關於Apple iOS Safari Web Content Guide的見解。特別是處理定向事件。

我希望這有助於在響應式網頁設計的過程中。

來源

2012-06-11 17:20:35 David

+1雖然我的問題比較微妙，但我經常發現我的佈局在旋轉後沒有迴流。您的解決方案似乎也修復了我的問題。謝謝！ – mckamey

移動Safari瀏覽器沒有迴流調整大小 - 錯誤行爲

回答

相關問題