添加<META NAME =「視口」>與移動檢測

Question

截至晚了，我已經看到了一些網站，具有相當於在JavaScript /服務器端代碼如下聲明：

if user is on a mobile device 
    print '<meta name="viewport" content="scaling stuff">' 

是僅在移動設備上添加標籤有什麼優勢？它似乎不太可靠，因爲它基於用戶代理，但我有興趣聽到雙方。

Answer 1

我會建議在每個響應式網站上使用<meta name="viewport" content="width=device-width">或<meta name="viewport" content="width=device-width, initial-scale=1">。它不需要有條件添加，因爲它對桌面設備沒有影響。

它是做什麼的？

一個視口元素爲瀏覽器指示如何控制頁面的尺寸和縮放。

width = device-width部分設置頁面的寬度以跟隨設備的屏幕寬度（根據設備的不同而不同）。

（可選）initial-scale = 1.0部分設置瀏覽器首次加載頁面時的初始縮放級別。這將防止用戶放大，這就是爲什麼我傾向於不使用該部分，但可能在移動應用程序中得心應手。

如果您不使用元視口標記會發生什麼？

移動設備將假定該網站的寬度爲980像素，並嘗試縮放網站以使其適合屏幕。它還會嘗試調整文本的大小以使其更具可讀性。這可能在沒有響應的網站上很方便，但是對於網站的響應，您希望完全控制移動設備呈現移動設備的方式。