В настоящее время к моему сайту применяются стили, которые вступают в силу при изменении размера экрана или при его посещении с помощью iphone с использованием медиазапросов CSS. http://iamcreative.me
Медиа-запрос
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 320px) and (orientation:portrait)" href="css/iphone.css" />
Проблема, которую я обнаружил, заключалась в том, что после создания таблицы стилей для портретного представления 720p на ipad это затронет некоторые стили, которые я создал для iphone!
Я думаю, это потому, что у iphone теперь разрешение экрана составляет 940 пикселей.
Так вот, что я придумал и подумал, что это лучший способ обойти мою проблему?
Я создаю функцию:
<script type="text/javascript">
function isiPad() {
return navigator.userAgent.match(/iPad/i);
}
</script>
Затем на странице добавляю:
if (isiPad()) {
document.styleSheets[0].href="ipad.css";
}
else
{
document.styleSheets[0].href="everything-else.css";
}