影響jQuery的元視口？

所以我目前正在努力優化我的博客移動。我選擇了爲窗口寬度小於768像素的設備添加額外CSS文件的方式。桌面模式下，我的頁面寬度爲1022像素，移動版本的寬度爲流動寬度。影響jQuery的元視口？

所以我在頭部分的代碼是這樣的：

var mobileSite = false; 
if($(window).width() < 768) { 
    mobileSite = true; 
    $('head').append('<link rel="stylesheet" href="mysite.com/mobile.css" type="text/css" />'); 
}

就像一個魅力至今。接下來的事情是停止iPad（未在Andriod上測試）放大到內容部分。在這兩種模式下，iPad的應該沒有放大顯示完整的頁面，所以我說這一點：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

沒有成功。據我所知，width=device-width是告訴瀏覽器頁面有多大，所以瀏覽器知道應該縮小多少。我試過initial-scale=0.7這有幫助，但我想那只是針對特定設備，我試過它，這是iPad 2. 因此，我嘗試width=1022哪些幫助 - iPad默認顯示整個頁面沒有放大。但副作用是iPhone或Lumia 920等其他移動設備不再加載移動CSS，這對我來說很奇怪。但我想我可以去周圍的特定元爲我的網站的移動和桌面版本：這裏

var mobileSite = false; 
if($(window).width() < 768) { 
    mobileSite = true; 
    $('head').append('<link rel="stylesheet" href="mysite.com/mobile.css" type="text/css" />'); 
    $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />'); 
} else { 
    $('head').append('<meta name="viewport" content="width=1022, initial-scale=1.0, maximum-scale=1.0" />'); 
}

同樣的效果。移動版本不再加載。所以mobile.css不會被添加。

問題在哪裏？

我想要什麼：在窗口寬度大於768像素的任何設備上顯示我的站點的桌面版本完全縮小併爲每個設備窗口寬度加載mobile.css < 768像素。

來源

2012-12-26 ProblemsOfSumit

您可以使用視

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

旁邊CSS媒體查詢針對某些視大小。附加的JSFiddle可以完成您無需使用Javascript即可實現的功能：http://jsfiddle.net/3muzkfdt/

調整結果窗格以查看使用不同CSS的頁面。

如果你想模塊化的成mobile.css和desktop.css的CSS，只要導入CSS如下：

@media (max-width: 768px){ 
    @import 'mobile.css'; 
} 

@media (min-width: 769px){ 
    @import 'desktop.css'; 
}

見MDN對媒體查詢以及它們的使用進一步信息：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

來源

2014-09-12 15:52:37

影響jQuery的元視口？

回答

相關問題