Блог

Я использую специальный css для мобильных устройств, но установил максимальную ширину устройства в 480 пикселей (я не знаю, стандартный это размер или нет). однако, когда мой экран находится в ландшафтном режиме, ширина на самом деле превышает 480 пикселей, поэтому этот файл mobile.css не загрузился.

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

Как правильно справиться с этой ситуацией … ? пожалуйста, помогите!

—————————- Обновить ——————————————-

Итак, это работает нормально, но, похоже, мобильные устройства делают странные вещи при начальной загрузке страницы.

Вот что, как я обнаружил, работает. В настоящее время я разрабатываю сайт для устройств iOS / Android и использую 670 пикселей:

 <meta name="viewport" content="width=670, initial-scale=0.45, minimum-scale=0.45"/>
  

Я также поместил все в div со следующим стилем

 #mainDiv
{
        max-width:670px; 
        margin-right: auto; 
}
  

Это отлично подходит для мобильного окна просмотра в портретном режиме и, поскольку div выровнен по левому краю, для альбомной ориентации тоже.