使用視口元標記設置內容的最小寬度

我需要將內容的最小寬度設置爲480px，以便任何人在屏幕上查看< =以便必須滾動查看內容。原因在於無法使佈局在此分辨率下工作。使用視口元標記設置內容的最小寬度

這裏就是我有

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">

我需要的是這樣的，但顯然，這並不工作

<meta name="viewport" content="width=device-width,, min-width=480px, initial-scale=1, maximum-scale=1, minimum-scale=1">

來源

2012-11-02 Jacob Windsor

你想設置的內容的最小寬度在頁面上你MEA N +爲什麼不使用媒體查詢？ – Rchristiani

就像在''元素上設置'最小寬度'一樣簡單。 –

相關：http://stackoverflow.com/questions/15040408/achieving-min-width-with-viewport-meta-tag –

這聽起來像你想設置的內容的最小寬度頁面，而不是視口本身。 This article可能會幫助你。

你可能希望做：

@media all and (max-width: 480px) { 
    // styles assigned when width is smaller than 480px; 

}

這樣的事情，在該塊就可以發送的樣式內容上有480像素，下寬屏幕。

希望你在找什麼。

來源

2012-11-02 18:44:35 Rchristiani

-2

你的第二個解決方案確實有效 - 你可能沒有看到的是你在width=device-width之後有2個逗號，這可能是你沒有工作的原因。我已經複製了它，並沒有問題。

有時候新鮮的眼睛會做這一切。

編輯：不過，就你而言，媒體查詢正是你需要的。

來源

2013-04-24 18:14:16 davewoodhall

-4

<script> 
     //viewport just for screens under/with 480px width other screen widths show the whole page resized 
     if(screen.width <= 480) { 
      document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;");} 
     //for devices with more and less/equal than 480px width 
     window.onresize = changeViewport; 
      function changeViewport(){ 
       if(screen.width <= 480) { 
        document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;");} 
       if(screen.width > 480) { 
        document.getElementById("viewport").setAttribute("content", "");}   
       } 
    </script>

來源

2013-06-19 09:18:48

JavaScript在這種情況下是矯枉過正。 – caiosm1005

爲什麼這有倒票？ –

這種基於我的經驗的Meta的JavaScript操作很好。 – Morio

這是僅針對平板電腦和臺式機具有Web響應版本的解決方案。

這個代碼我們動態地禁用移動版本。在移動：

<!-- Meta Responsive --> 
<meta id="myViewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
<script> 
window.onload = function() { 
    if(screen.width <= 767) { 
     var mvp = document.getElementById('myViewport'); 
     mvp.setAttribute('content','width=767'); 
    } 
} 
</script> 
<!-- End of Meta Responsive -->

來源

2014-03-31 17:35:20 jalopezsuarez

我嘗試了很多代碼，並取得了一些不錯的成績做一個排序realoading視口的......但是，我認爲最好的方法是創建一個完整的響應網站（最多至320像素;）

那是最好的形式給出：

<script> 
 
//VIEWPORT 
 

 
function mobileFriendly() { 
 
    setTimeout(function() { 
 
     if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { 
 
      var ww = (document.documentElement.clientWidth < window.screen.width) ? jQuery(window).width() : window.screen.width; //get proper width 
 
      var mw = 725; 
 
      //alert ("width" + ww); 
 
      var ratio = ww/mw; //calculate ratio 
 
      //alert ("ratio: " + ratio); 
 
       if(ratio < 1){ //smaller than minimum size 
 
        jQuery("meta[name='viewport']").attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + mw); 
 
       }else{ //regular size 
 
        jQuery("meta[name='viewport']").attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww); 
 
       } 
 
      } 
 
     }, 600); 
 
    } 
 
    jQuery(document).ready(function(){ 
 
    mobileFriendly() 
 
    }); 
 
    window.addEventListener("orientationchange", mobileFriendly, false); 
 

 
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<meta content="user-scalable=yes, maximum-scale=1.6, width=device-width, initial-scale=1, target-densitydpi=device-dpi" name="viewport">

來源

2016-03-21 23:23:25 gtamborero

使用視口元標記設置內容的最小寬度

回答

相關問題