Safari developer iphone mode is not working?_问答_开发者

Safari developer iphone mode is not working?

开发者 https://www.devze.com 2023-02-03 15:14 出处：网络

I started to learn how to design a website to work and look nice on iOs\'s Safari browser. I don\'t own iPhone/iPod, so I hav开发者_高级运维e to test is in PC Safari\'s developer mode I set to iPhone.

相关专题：css

I started to learn how to design a website to work and look nice on iOs's Safari browser. I don't own iPhone/iPod, so I hav开发者_高级运维e to test is in PC Safari's developer mode I set to iPhone.

The problem is it isn't work and I don't know if my HTML is bad, or the browser isn't that good developer tool as I thought it is.

My html (its just a simple test):

<!doctype html> 
<html lang="en"> 
<head> 
    <title>iPhone css test</title> 

    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width" />

    <link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" />
    <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" />

</head> 
<body> 
<div id="test">
    lorem ipsum
</div>
</body>
</html>

And my two css's:

iphone.css

#test{
    width: 480px;
    border: 1px solid #000000;
}

desktop.css

#test{
    width: 700px;
    margin: 0 auto;
    border: 1px solid #ff0000;
}

And no meter how I set Safari developer, it shows the 700px wide, centered, red bordered version of the div, not the 480px wide black. Did I miss something? A meta tag? Or other?

SOLVED: If browser width 480px or less than 480px the iphone.css applies automatically. It doesn't even need to be set to iPhone user agent. Thanks Jack Lawrence!

You need to actually resize th browser window to 480px or less for the media quesry in your CSS to work.

You've got three problems.

You can't change the stylesheet based on the window size (without some fancy javascript). Safari for windows will still use the desktop.css file because it has the potential to scale larger.
Changing your Useragent to Mobile Safari doesn't really do much. It is not a replacement for testing on a device. A useragent is simply an identification string, so you'd need some javascript to get that useragent and test if it's an iOS useragent and then pick the proper screen size. You might want to see http://en.wikipedia.org/wiki/User_agent.
What about the retina display?

The reason you're only seeing one div, is because you only have one div in your HTML markup.

The reason for the red border, 700px wide and centering is because of the way CSS (Cascading Style Sheet) works. It's the Cascade part, whichever rules are closest to the bottom will be used. So if you switch the order of your links in the head to:

 <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" />
 <link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" />

It'll probably turn out as you expected.

That or your iPhone CSS hacks aren't working.