Detecting iPad / iPhone using media queries

Am working on a project where I need to distinguish between the landscape and portrait modes of iPhone, iPad using media queries. Also, am using iPad 3, iPhone 4s. As simple and straightforward as this may sound, I am having the hardest time getting this to work. The closest I got to is this :-

@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*/
}

But, this does not differentiate between the portrait / landscape modes of the iPhone. Any clues on what could be wrong ?

回答1:

Here is some sample code that demonstrates functioning queries on an iPhone. It is white in portrait, black in landscape. You can ignore the base64 part, that was just to supply an icon without needing an external file:

<!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>

回答2:

I use the following media queries (defining splash images for web apps). It handles iPhone non-retina and iPhone 4/4s and both non-retina iPad and retina iPad (portrait and landscape). You can find this at 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)" />

回答3:

<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>