<link rel="stylesheet" media="screen and (min-width: 20px) and (max-width: 375px) and (orientation:portrait)" href="css/detailsLayout280.css" />
<link rel="stylesheet" media="screen and (min-width: 20px) and (max-width: 375px) and (orientation:portrait)" href="css/copy280.css" />
<link rel="stylesheet" media="screen and (min-width: 376px) and (max-width: 700px) and (orientation:landscape)" href="css/detailsLayout320.css" />
<link rel="stylesheet" media="screen and (min-width: 376px) and (max-width: 700px) and (orientation:landscape)" href="css/copy320.css" />
У меня есть страница, где CSS не будет загружаться изначально на iPhone, но если я переключу ориентацию туда и обратно, это произойдет.
Затем, щелкнув обновление, снова CSS не загружается, пока я не сделаю изменение ориентации снова.
Это происходит только на вторичной странице. Домашняя страница настроена почти так же, и она отлично работает.
У меня также есть:
<meta name="viewport" content="width=device-width, initial-scale=1">
который мне нужен для iPad CSS. Если я возьму это, проблема исчезнет для телефона (хотя и уменьшена), но мне это нужно для iPad.
Почему загрузка CSS не меняется, если я не изменю ориентацию?
Благодарю.
Возможно, вам потребуется указать плотность пикселей, так как смартфоны теперь имеют ширину 700px+.
Специфический браузер
(-moz-min-device-pixel-ratio: 2)
(-o-min-device-pixel-ratio: 2/1)
(-webkit-min-device-pixel-ratio: 2)
(min-device-pixel-ratio: 2)
Быстрый пример того, как вы можете применить это
<link rel="stylesheet" media="screen and (min-width: 20px) and (max-width: 375px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" href="css/detailsLayout280.css" />
Когда вы делаете разработку и меняете свой css часто, измените свой путь href, чтобы он содержал знак вопроса и что-то изменилось после него. Пример, который использует php
приведен ниже:
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
Таким образом, каждый раз, когда ваш href
будет другим. Это, однако, отключение способности кеширования браузера, и это не очень хорошо в производстве. В процессе производства убедитесь, что ваш файл css имеет версию в имени файла.