При указании min-width и min-device-width медиа-запросов - это ширина, которую вы заявляете на основании текущей ширины телефона или ширины телефона в обратном направлении?@media Ориентация Ширина
Например, iphone4 имеет ширину 320x480 в стандартной/портретной ориентации и имеет device-width из 320. Если телефон держится в ландшафте, то device-width сейчас 480 или он по-прежнему 320?
Ширина, которая используется, будет текущей шириной окна просмотра. Если ориентация вращается, ширина тока изменится на ширину повернутого устройства (или высоту устройства в портретном режиме).
Вы можете указать ориентацию, используя orientation: landscape.
Смотрите здесь для получения дополнительной информации: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Это всегда «ток» ширина. Вы можете легко проверить это, предупредив window.innerWidth или что-то подобное.
Пример:
+---------+ +-----------------------+
| | | |
| | | 480 x 320 |
| 320 | | |
| x | | |
| 480 | +-----------------------+
| | Width: 480px
| |
| |
+---------+
Width: 320px
Вращение также запускает resize событие.
Но важное замечание: если вы не имеете видовых мета-тег, как один из них, то используется другой ширины (например, 980px), который остается одинаковым для обоих направлений:
<meta name="viewport" content="initial-scale=1"/>
<meta name="viewport" content="initial-scale=1, user-scalable=no"/>
только один с из этих двух мета-тегов ширина адаптируется к ориентации.
Также была найдена эта ссылка, в которой указано, что для iphone и ipad при использовании «ширины устройства» ширина в ссылке всегда равна ширине портрета, независимо от ориентации. Использование 'width', с другой стороны, соответствует текущей ширине ориентации. http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml –
@HanniAbukhater ooh, интересно. Я не знал, что существует различие. Благодаря! – johnnyRose