如何讓這個媒體查詢在三星Galaxy Note4的不同瀏覽器中的工作原理相同？

我有一個HTML代碼：如何讓這個媒體查詢在三星Galaxy Note4的不同瀏覽器中的工作原理相同？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>test page</title> 
<style> 
.hint {width:510px;} 
@media only screen and (max-device-width: 720px) { 
    .hint {width:280px} 
} 
@media only screen and (max-device-width: 720px) and (orientation: landscape){ 
    .hint {width:350px} 
} 
</style> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
</head> 
<body> 
    <div class="hint">just a test 
    <script>alert($(window).width()); alert($('.hint').css('width'));</script> 
    </div> 
</body> 
</html>

它工作正常，在所有iOS設備，但對於一些喜歡三星Galaxy Note 4的Android設備的行爲怪異，我可以重現該問題。

對於默認瀏覽器，它工作正常。警報結果爲980像素和280像素，但對於某些瀏覽器（如UC瀏覽器），則爲510像素。

我的媒體查詢代碼有什麼問題嗎？

謝謝你的任何提示！

來源

2015-07-13 Aw Qirui Guo

你應該看看「Twitter的引導」如何概括在http://getbootstrap.com/css/#grid-media-queries

他們的媒體查詢結構試着比較那些有自己的書面媒體查詢結構，而如果你還在堅持，你應該看看克里斯書面媒體查詢設置在https://stackoverflow.com/a/21437955/4069464

希望這有助於！

注意：如果在設置完所有適當的媒體查詢集後，它仍然不適用於UC瀏覽器，那麼您可能必須詳細閱讀UC瀏覽器如何定義其移動屏幕大小（可能他們可能已經定義了自己的一組不同的屏幕尺寸定義）

來源

2015-07-13 01:39:29

它使用'最大寬度'查詢而不是'最大設備寬度'查詢。謝謝！ –

不客氣！ :-) –

如何讓這個媒體查詢在三星Galaxy Note4的不同瀏覽器中的工作原理相同？

回答

相關問題