元視口僅適用於手機（屏幕寬度小於640）

我正在做一個網站，它應該在屏幕上的寬度超過640（臺式機和平板電腦）上縮放，並且在小於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的檢測也沒有幫助，因爲androids返回寬度不正確，如果它之前沒有宣佈元視口。

有人知道，如何檢測頭部的平板電腦或實現我想要的結果。

來源

2014-06-26 onlydimon

如果」重新使用Wordpress https://github.com/scottsweb/mobble可能是一個好主意。它可以檢測各種瀏覽器和設備。所以你可以這樣說：「if（is_mobile（）.......」） – Luc

Thnx，我只在前端部分工作 – onlydimon

你想達到什麼是我認爲一個負責任的網站，因此，你需要爲CSS媒體查詢：

在頭部分，您可以添加：

< META NAME =「視窗」內容= 「width =設備寬度」>

在你的CSS你應該這樣做，以便它會檢測到屏幕的大小，它會響應（改變），取決於你的設計寬度超過640像素。

@media屏幕（最小寬度：640像素）{

//一些代碼在這裏

}

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

來源

2014-06-27 07:29:46

Thnx爲你的答案，我解決了不同的問題。已經有媒體查詢設計，但是無法在手機上實現平板電腦和自適應版本的縮放功能，這就是問題所在。至於我，問題出現在「initial-scale = 1」，當我拋出這個問題時，我不知道這是否是一個好的舉措，但它的工作原理 – onlydimon

所以問題是爲什麼初始規模在智能手機上殺死移動版本 – onlydimon

元視口僅適用於手機（屏幕寬度小於640）

回答

相關問題