元視口僅適用於移動設備（屏幕寬度小於640）

Question

我正在做一個網站，該網站應在寬度大於640（台式機和平板電腦）的屏幕上縮放，並在小於640（智能手機）的設備上以移動版本的形式顯示。

因此，對於智能手機，我需要meta [name = viewport]，而對於其他設備，則不需要它。

目前在腦海中使用這樣的代碼

<script>
        if(navigator.userAgent.match(/Android/i)
          || navigator.userAgent.match(/webOS/i)
          || navigator.userAgent.match(/iPhone/i)
          || navigator.userAgent.match(/BlackBerry/i)
          || navigator.userAgent.match(/Windows Phone/i)) {
            document.write("<meta content='width=device-width, initial-scale=1' name='viewport'>");
        }
</script>

但是清除寬度大於640（平板電腦）的設備無濟於事。

頭部的screen.width的檢測也​​無濟於事，因為如果android之前未宣布元視口，則androids會返回錯誤的寬度。

有人知道如何檢測頭部的葯片或達到我想要的結果。

Answer 1

您想要實現的是我認為是響應式網站，因此您需要為此的CSS媒體查詢：

在標題部分，您可以添加：

<meta name =“ viewport” content =“ width = device-width”>

在css中，您應該執行此操作，以便它可以檢測屏幕的大小，並根據您設計的寬度（大於640像素）做出響應（更改）。

@media屏幕和（最小寬度：640px）{

//一些代碼

}

這個網站可以幫助您學習自適應網頁設計http://www.sitepoint.com/build-a-sensitive-mobile-friendly-website-from-scratch-dive-into-the-code/