Мобильный Safari Reflow без изменения размера - ошибочное поведение
Редактировать 2Этот вопрос ищет гладкий, чистый способ переформатировать текстна iPhone.
Улучшение веб-приложения, чтобы иметь 2 разных ширины (320 и 480) в зависимости от ориентации. Намерение также состоит в том, чтобы иметь ширину 480 для немобильных экранов (т.е. > 480). Он работает в основном так, как хотелось бы, за исключением случаев, когда страница обновляется в альбомной ориентации. Это приводит к тому, что макет возвращается к 320 (слева) и оставляет темную полосу справа.
- Загрузить в книжной ориентации
- Повернуть в альбомную
- Обновить в альбомную
Для изменения размера и изображения 2 требуется поворот в книжную и обратно. Для меня это проблема юзабилити. Страница отлично изменяет размер и поворачивается на Android и является «полноразмерной» на рабочем столе.
Кто-нибудь знает, что мне не хватает? Я пробовал много итераций этого и читал о нескольких решениях ошибок. Ни одна из идей не меняет результат. О том, чтобы подать отчет об ошибке. У меня есть подозрение, что это в строках медиа-запроса #container.
Редактировать: сайт создан для мобильных устройств (ширина 320). Желание состоит в том, чтобы расширить использование пространства, когда это пространство доступно. Основная цель состоит в том, чтобы текст и элементы перекомпоновывались. Глядя на фотографии, обратите внимание на выравнивание полей ввода с их метками.
Я пробовал 2 подхода, чтобы заставить эту работу работать.Другой заключался в использовании javascript для изменения ширины #container. В настоящее время используется со следующими медиа-запросами в конце встроенной таблицы стилей. Я предпочитаю решать это с помощью медиа-запроса.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>The Title</title>
<style type="text/css">
html {
margin: 0;
padding: 0;
}
body {
font: 14px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#container {
margin: auto;
width: 480px;
.....
@media screen and (max-width: 480px) {
body {
-webkit-text-size-adjust: none;
}
#container {
max-width: 480px !important;
width: 100% !important;
}
}
@media screen and (max-width: 320px) {
body {
-webkit-text-size-adjust: none;
}
#container {
max-width: 320px !important;
width: 100% !important;
}
}
</style>
.....