元視口標記和CSS媒體查詢

我有CSS媒體查詢與元視口標記一起使用的問題。我正在製作iPad webapp，它將在主屏幕上的獨立視圖內工作。元視口標記和CSS媒體查詢

這是CSS：

.header_portrait { 

    position: relative; 
    top: 0px; 
    left: 0px; 
    background: #ccc; 
    width: 1536px; 
    height: 219px; 

} 

.header_landscape { 

    position: relative; 
    top: 0px; 
    left: 0px; 
    background: #fff; 
    width: 1536px; 
    height: 219px; 

} 

@media only screen and (max-device-width: 1024px) and (orientation:portrait) { 
    .header_landscape { display: none; } 
} 
@media only screen and (max-device-width: 1024px) and (orientation:landscape) { 
    .header_portrait { display: none; } 
}

這是HTML <head>的一部分：

<meta id="viewport" name="viewport" content="user-scalable=0, width=device-width, height=device-height, initial-scale=0.5, maximum-scale=0.5" /> 
<meta name="apple-mobile-web-app-capable" content="yes">

這是HTML <body>的一部分：

<div class="header_portrait" ontouchmove="togle_touch('disable');"> 

</div> 
<div class="header_landscape" ontouchmove="togle_touch('disable');"> 

</div>

如果我刪除中繼檢視區標記從頭部定位檢測工作正常。看來，視口弄亂最大設備寬度，以便CSS媒體查詢檢測不到，因爲它應該。

任何幫助是極大的讚賞:)

來源

2012-11-21 Develoger

另外應該「user-scalable = 0」不是「user-scalable = no」嗎？也許這兩個工作，但我一直使用「用戶可擴展=否」。 –

它沒有幫助，也可以使用0或不可用於用戶可擴展 – Develoger

（以評論或編輯回答見Question with no answers, but issue solved in the comments (or extended in chat)）

的OP寫道：

我已經解決了這個！

只需更換：

<meta id="viewport" name="viewport" content="user-scalable=0, width=device-width, height=device-height, initial-scale=0.5, maximum-scale=0.5" />

有了：

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

它非常適合現在和iPad 3的，我必須在iPad的1和2測試。 ..

來源

2015-01-26 14:27:27

元視口標記和CSS媒體查詢

回答

相關問題