設置一個適當的視口，與在iOS與Android兼容，這與旋轉

我有一個問題，這是我見過的被要求各地工作，但我還沒有找到一個簡潔的工作答案，正常運行iOS上&機器人（我現在專門用iPad，iPad2，Android手機和iPod Touch進行測試）。所以我擁有的是一個可擴展的網站，效果很好。我希望能夠以指定站點的最小寬度爲480像素，最大寬度爲1014px，以及其間的任何東西都會保持原樣。這是我的當前代碼：設置一個適當的視口，與在iOS與Android兼容，這與旋轉

viewportWidth由window.screen.width minwidth計算出的變量（480） maxwidth是一個變量（1014）

下面的代碼被稱爲在設備旋轉事件，其正在被觸發。

注：我已經離開的一些在以下源我註釋掉的代碼，以顯示我曾嘗試

任何幫助是非常讚賞，我的代碼的工作，但我發現在較小的設備我有放大出微幅下挫，因爲頁面是視（儘管它不應該是）之外。旋轉偶爾修復這幾次...

/*Set initial Sizes*/ 
     if(viewportWidth > maxWidth){ 
      //dont adjust since it may be desktop 
      viewportWidth = maxWidth; 
      $('meta[name="viewport"]').attr('content', 'initial-scale=1.0; width=device-width' ); 


      //viewport = document.querySelector("meta[name=viewport]"); 
      //viewport.setAttribute('content', 'width=' + maxWidth + '; initial-scale=1.0; user-scalable=1;'); 

     }else if(viewportWidth > minWidth && viewportWidth < maxWidth){ 
      $('body').removeClass('mobile'); 
      $('body').addClass('desktop'); 
      $('meta[name="viewport"]').attr('content', 'initial-scale=1.0; width=device-width'); 

      //viewport = document.querySelector("meta[name=viewport]"); 
      //viewport.setAttribute('content', 'width=' + window.screen.width + '; initial-scale=1.0; user-scalable=1;'); 

      isMobile = 0; 

     }else if(viewportWidth <= minWidth){ 

      if(/iPhone|iPad|iPod/i.test(navigator.userAgent) ) { 
       $('meta[name="viewport"]').attr('content', 'initial-scale =' + (window.screen.width/minWidth).toFixed(2) ); 
      }else{ 
       $('meta[name="viewport"]').attr('content', 'initial-scale = ' + (window.screen.width/minWidth).toFixed(2) + '; width=device-width'); 
      } 

      //viewport = document.querySelector("meta[name=viewport]"); 
      //viewport.setAttribute('content', 'initial-scale = ' + (window.screen.width/minWidth).toFixed(2) + '; width=' + minWidth + '; initial-scale=1.0; user-scalable=1;'); 

      $('body').removeClass('desktop'); 
      $('body').addClass('mobile'); 

      //$('#pageBody').width(minWidth); 
      viewportWidth = minWidth ; 

      isMobile = 1; 

     }

來源

2012-09-07 Bren1818

沒有人回答，所以這是一些東西，工作

1，爲CSS 2使用媒體查詢，使用這個腳本來修復縮放

<meta id="Viewport" name="viewport" width="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 

<script type="text/javascript"> 
$(function(){ 
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { 
    var ww = ($(window).width() < window.screen.width) ? $(window).width() : window.screen.width; //get proper width 
    var mw = 480; // min width of site 
    var ratio = ww/mw; //calculate ratio 
    if(ww < mw){ //smaller than minimum size 
    $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww); 
    }else{ //regular size 
    $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww); 
    } 
} 
}); 
</script>

來源

2013-01-05 20:42:01 Bren1818

我像瘋了似的打得到我的網站在Firefox Android和默認瀏覽器擴展（android的鉻，iPad和iPhone的工作），這是其正確縮放它在所有瀏覽器上的所有設備的唯一解決方案。謝謝！！！ –

設置一個適當的視口，與在iOS與Android兼容，這與旋轉

回答

相關問題