視口忽略自定義寬度

我正在玩視口，試圖做寬度爲520，但它似乎做設備寬度。有任何想法嗎？視口忽略自定義寬度

<html> 
<head> 
<meta name="viewport" content="width=520, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<style type="text/css"> 
h1 
{ 
    width: 980px; 
    border: 1px solid red; 
} 

h2 
{ 
    width: 520px; 
    border: 1px solid green; 
} 

h3 
{ 
    width: 320px; 
    border: 1px solid green; 
} 

</style> 
</head> 

<body> 
<h1>I am a big heading 980px wide. Yes I am</h1> 
<h2>I am a big heading 520px wide. Yes I am</h2> 
<h3>I am a big heading 320 wide. Yes I am</h3> 
</body>

來源

2013-07-12 Chris Muench

您是否閱讀過[這篇偉大的文章]（http://www.quirksmode.org/mobile/viewports2.html）解釋像素對移動視口意味着什麼？ –

有沒有特別的理由讓你不要設置「DOCTYPE」？ –

對於設置初始或最大比例的頁面，這意味着width屬性實際轉換爲最小視口寬度。例如，如果您的佈局需要至少500個像素的寬度，那麼您可以使用以下標記。當屏幕大於500個像素寬，瀏覽器將擴大視口（而不是放大），以適應屏幕：

<meta name="viewport" content="width=500, initial-scale=1">

這是從這個LINK的。

因此，我假設您的情況也是如此，因爲您已將HTML標籤寬度設置爲大於520px，瀏覽器將520px寬度作爲最小寬度並從那裏向上工作以呈現較大的標籤。

來源

2013-07-22 11:30:43 AnaMaria

This article似乎表明content="initial-scale=1, maximum-scale=1, user-scalable=no"是問題，如果你想創建一個固定的視口，他們應該被忽略。

我還沒有機會自己測試它，但理由聽起來很合理。

希望有所幫助。

來源

2013-07-19 13:50:22

很難依賴視口元標記的寬度。由於this article指出：

有時正式screen.width沒有什麼意義，因爲像素數量太高。例如，Nexus One 的正式寬度爲480像素，但Google工程師決定使用設備寬度爲時，佈局視口寬度爲480px的太多。它們縮小到2/3，所以設備寬度爲，寬度爲320px，就像在iPhone上一樣。

那些320px是「CSS像素」，意思是320像素是視口的寬度，不管設備或文檔實際上有多寬。

如果您指定的寬度大於（或小於）手機的實際尺寸和限制比例，則會出現問題。嘗試刪除initial-scale=1, maximum-scale=1,以允許瀏覽器縮放頁面以正確適合設備。您仍然可以保留user-scalable=no和width=520。

來源

2013-07-19 14:00:19 Mooseman

-1

您的標頭標籤（H1，H2，H3）寬度分別爲980像素，520像素和320像素。您的標頭標籤具有硬編碼寬度，因此設備寬度將是多少，但您的標頭標籤寬度將相同，並且不會變爲響應。我認爲，而不是提供像素寬度，爲什麼你不使用寬度％。而且，您還可以將標題標籤放在一個容器中，即使您可以根據您的個人標題標籤製作該容器position:relative。

來源

2013-07-22 10:58:49

視口忽略自定義寬度

回答

相關問題