Я начал изучать, как создать веб-сайт, который будет работать и выглядеть красиво в браузере Safari от iO.У меня нет iPhone / iPod, поэтому я должен провести тестирование в режиме разработчика PC Safari, который я установил на iPhone.
Проблема в том, что это не работает, и я не знаю, плох ли мой HTMLили браузер не такой хороший инструмент для разработчиков, как я думал.
Мой HTML (это просто простой тест):
<!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>
И два моих CSS:
iphone.css
#test{
width: 480px;
border: 1px solid #000000;
}
desktop.css
#test{
width: 700px;
margin: 0 auto;
border: 1px solid #ff0000;
}
И нет метра, как я устанавливаю Safari Developer, он показываетверсия div с шириной в 700px по центру и красной рамкой, а не черная с шириной 480px.Я что-то пропустил?Метатег?Или другое?
решено: Если ширина браузера 480px или меньше 480px, iphone.css применяется автоматически.Его даже не нужно устанавливать на пользовательский агент iPhone.Спасибо, Джек Лоуренс!