用jQuery更改視口元標記

我想知道是否有可能在頁面加載之前使用jquery添加元標記到html頁面。我之所以問，是因爲我有一個沒有視口元標記的頁面，它應該只有當分辨率下降到700px以下 - <meta name="viewport" content="width=device-width, initial-scale=1"/>用jQuery更改視口元標記

原因是，我有移動網站的html標記（使用媒體查詢）&也爲桌面版本的HTML標記（我沒有一個用於平板電腦）。我想確保爲桌面設計的HTML標記在頁面加載時在平板電腦上正確呈現，並且在我們更改設備方向時也能正確呈現。

在此先感謝！

來源

2014-08-27 AB.

@AndyHolmes - 有一個視口'< meta name =「viewport」content =「width = device-width，initial-scale = 1」/>'當我們多次改變方向時，會導致頁面在平板電腦上溢出。 – 2014-08-27 09:22:01

意識到我的評論！哈哈。檢查我的答案:) – 2014-08-27 09:22:37

你應該用CSS處理這個問題。如果視口標籤在平板電腦或臺式機上造成問題，那麼您的CSS編碼嚴重不足！ – Cameron 2014-08-27 09:24:51

使用jQuery你可以做如下所示：

if ($(window).width() < 700) { 
    $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1"/>'); 
}

EDIT

具有由默認視口標籤，然後取出它上面699px：

HTML：

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"/> 
</head>

的jQuery：

if ($(window).width() > 699) { 
    $('head').remove('<meta name="viewport" content="width=device-width, initial-scale=1"/>'); 
}

來源

2014-08-27 09:21:25

謝謝，但是頁面已經加載時不會發生上述情況嗎？不幸的是，我需要在頁面加載之前添加元標記 - 如果可能的話。 – 2014-08-27 09:25:49

然後在默認情況下將其刪除> 700 – 2014-08-27 09:26:24

@AB。看到編輯:) – 2014-08-27 09:32:15

-1

試試這個（你不需要/在meta標籤結束了）：

if(screen.width < 700) { 
    $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1">'); 
}

來源

2014-08-27 09:20:00 Zak

當然可以儘快jQuery庫被加載和頭部是在DOM註冊：

if (jQuery('html').outerWidth(true) < 700) { 
    jQuery.('head').append('<meta name="viewport" content="width=device-width, initial-scale=1"/>'); 
}

來源

2014-08-27 09:20:24 Axel

用jQuery更改視口元標記

回答

相關問題