由於我的網站在小屏幕上看起來不太好,我想創建一個JS功能,當屏幕寬度爲小於或等於800px。當寬度太小時重定向到移動頁面
這裏是它的代碼:
if (screen.width <= 800) {
document.location ="index_mobile.html";
};
如果代碼工作,然後當我在瀏覽器窗口縮小到800像素寬,index_mobile.html應該顯示出來。但它現在沒有出現。有誰知道發生了什麼事?
由於我的網站在小屏幕上看起來不太好,我想創建一個JS功能,當屏幕寬度爲小於或等於800px。當寬度太小時重定向到移動頁面
這裏是它的代碼:
if (screen.width <= 800) {
document.location ="index_mobile.html";
};
如果代碼工作,然後當我在瀏覽器窗口縮小到800像素寬,index_mobile.html應該顯示出來。但它現在沒有出現。有誰知道發生了什麼事?
screen.width
將返回顯示器的寬度,而不是窗口,因此您不能只縮小瀏覽器窗口以獲得不同的值。要做到這一點,你會想要使用window.outerWidth
什麼的。
感謝您的幫助。這很好。 – 7537247
移動瀏覽器不報告或使用真實設備的分辨率,因爲這將使互聯網上無法使用基本上所有網站。
他們所做的是創建一個「虛擬屏幕」,其分辨率接近桌面PC的分辨率,然後在頁面上實現縮放。
如果您想知道真實的設備分辨率,您需要禁用設備上的自動縮放比例。例如,對於iOS和Android設備可以做到這一點添加
<meta name="viewport"
content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
到你的頁面的<head>
部分。這會通知瀏覽器該頁面已被設計用於處理低分辨率設備並禁用虛擬屏幕圖層。
如果這是專門爲您的網站的移動版本有[更好](http://stackoverflow.com/questions/9511526/auto-mobile-site-redirect)這樣做的方式。 –