правильно масштабировать сайт для отображения в iphone

Question

Я создал мобильный веб-сайт размером 320 пикселей. В этой теме (/2653862/mobilnyi-sait-dlya-problem-s-iphone) он выбрасывает полезный фрагмент кода, чтобы гарантировать, что iPhone отображает его с правильным разрешением, шириной 320. Однако, когда я поворачиваю телефон, он автоматически не масштабируется, чтобы соответствовать более широкому окну просмотра.

Есть предложения, как это исправить?

Answer 1

Вы можете динамически изменять размер вашего контента, используя CSS медиазапросы [w3.org].

Чтобы определить, когда мобильный телефон является портретным или альбомным, используйте orientation, например:

@media all and (orientation:landscape) {
    /* apply your css styles here */
}

Вы также можете связать воедино определенные сценарии, в зависимости от того, насколько конкретным вы хотите быть.Например, если вы хотите оформить портретный браузер с шириной устройства 400 пикселей, вы должны сделать следующее:

@media all and (orientation:landscape) and (device-width:400px) {
    /* apply your css styles here */
}

* Следует отметить, что медиазапросы должны быть в самом концеваши CSS-файлы, иначе они не будут корректно перезаписывать ваши существующие стили.

Answer 2

Трудно сказать, не увидев сайт, но я сделаю удар: вы прямо говорите, что ширина сайта составляет 320 пикселей, когда вы поворачиваете его, ширина телефона не такая. Ваша обертка должна быть width: 100%, чтобы документ сам масштабировал ее, иначе вы масштабируете область просмотра.

Answer 3

В некоторых моих мобильных проектах я использовал прослушиватель событий для события resize.Когда устройство переходит из портретной / альбомной ориентации (или размер окна рабочего стола изменяется), вызывается событие, и вы можете вручную установить высоту и ширину ваших элементов.

Вот краткий пример того, что я использовал:

window.addEventListener('resize', resizetick, false);
<...>
function resizetick(e) {
    if(this.resizet)
        clearTimeout(this.resizet);
        resizet = setTimeout(resizecallback, 100);
}
<...>
function resizecallback() {
    <if new resolution then resize elements here>
}

Цель setTimeout / clearTimeout - предотвратить множественные изменения размера.События браузера настольного компьютера запускаются непрерывно, а изменение размера и мобильные пользователи могут непреднамеренно изменить направление своего устройства.Я хочу избежать повторного изменения размера контента.

Вам нужно будет связать или иным образом обработать resize () и resizecallback ().У меня нет проекта, пригодного для вырезания и вставки рабочего кода из - извините.: \