使用媒體查詢檢測iPad/iPhone

正在開發一個項目，我需要使用媒體查詢區分iPhone，iPad的橫向和縱向模式。另外，我正在使用iPad 3，iPhone 4s。儘管聽起來很簡單明瞭，但我最難得到這個工作。我到最接近的是這樣的： -使用媒體查詢檢測iPad/iPhone

@media (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait) { 
/*iPad portrait*/ 
} 

@media (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: landscape) { 
/*iPad landscape*/ 
} 

@media (max-device-width: 480px) 
and (orientation: portrait) { 
/*iPhone portrait*/ 
} 

@media (max-device-width: 480px) 
and (orientation: landscape) { 
/*iPhone landscape*/ 
}

但是，這並不對iPhone的肖像/風景模式之間進行區分。任何可能出錯的線索？

來源

2012-07-27 sanz

下面是一些示例代碼，演示了iPhone上的功能查詢。它在肖像中是白色的，在景觀中是黑色的。你可以忽略的base64一部分，只是爲了無需外部文件提供一個圖標：

<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
<link rel="apple-touch-icon" href="data:image/png;base64,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"/> 
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
<title>Media</title> 
<style> 
html,body{width:100%;height:100%;margin:0;padding:0;} 
@media screen and (max-device-width: 320px) and (orientation:portrait) { 
    body { background-color:#FFF; } 
} 
@media screen and (max-device-width: 320px) and (orientation:landscape) { 
    body { background-color:#000; } 
} 
</style> 
</head> 
<body onload="fullscreen()"> 
<span style="color:#000">Portrait</span><span style="color:#FFF">Landscape</span> 
</body> 
</html>

來源

2012-07-27 01:01:29

原來方向媒體查詢的iPhone手機無法正常工作，並且只能用於解鎖iPhone和iPad的作品找到這個，剛剛發現這一點，並一直在尋找一些替代的方法來解決這個 – sanz 2012-07-27 01:17:52

我不確定你在哪裏確定，它絕對適用於我的項目。我將修剪一個例子，併發布一些示例代碼 – 2012-07-27 01:26:30

發佈樣本代碼 – 2012-07-27 01:50:47

我用下面的媒體查詢（定義爲Web應用程序飛濺圖像）。它可以處理iPhone非視網膜和iPhone 4/4以及非視網膜iPad和視網膜iPad（縱向和橫向）。您可以在https://github.com/gwilson/iOSWebAppTemplates

<!-- iPhone standard resolution 320x460 (landscape not needed because all web apps start portrait on iPhone) --> 
<link rel="apple-touch-startup-image" href="splash-320x460.jpg" media="(device-width: 320px)" /> 
<!-- iPhone high resolution (retina) 640x920 pixels (landscape not needed because all web apps start portrait on iPhone) --> 
<link rel="apple-touch-startup-image" href="splash-640x920.jpg" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" /> 
<!-- iPad Portrait 768x1004 --> 
<link rel="apple-touch-startup-image" href="splash-768x1004.jpg" media="(device-width: 768px) and (orientation: portrait)" /> 
<!-- iPad Landscape 748x1024 (yes, a portrait image but with content rotated 90 degrees - allows 20px for status bar) --> 
<link rel="apple-touch-startup-image" href="splash-748x1024.jpg" media="(device-width: 768px) and (orientation: landscape)" /> 
<!-- iPad retina Portrait 1536x2008 --> 
<link rel="apple-touch-startup-image" href="splash-1536x2008.jpg" media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" /> 
<!-- iPad retina Landscape 1496x2048 (yes, a portrait image but with content rotated 90 degrees - allows 40px for status bar) --> 
<link rel="apple-touch-startup-image" href="splash-1496x2048.jpg" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" />

來源

2012-08-15 02:05:56

<html> 
<head> 
<style type="text/css"> 

/* Mobile Layout: 480px and below. */ 
.gridContainer { 
    margin-left: auto; 
    margin-right: auto; 
    width: 100%; 
    padding: 0; 
    height: 300px; 
    background: #ff0000; 
} 
#LayoutDiv1 { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ 
@media only screen and (min-width: 481px) { 
.gridContainer { 
    width: 80.675%; 
    padding-left: 1.1625%; 
    padding-right: 1.1625%; 
    background: #00ff00; 
    height: 200px; 
} 
#LayoutDiv1 { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
} 

/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ 
@media only screen and (min-width: 769px) { 
.gridContainer { 
    width: 88.2%; 
    max-width: 1232px; 
    padding-left: 0.9%; 
    padding-right: 0.9%; 
    margin: auto; 
    background: yellow; 
    height: 100px; 
} 
#LayoutDiv1 { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
} 
} 
</style> 
</head> 

<body> 
<div id="LayoutDiv1"> 
    <div class="gridContainer">Welcome to iPad</div> 
</div> 
</body> 
</html>

來源

2014-12-11 07:37:18

使用媒體查詢檢測iPad/iPhone

回答

相關問題