Я изо всех сил пытался сохранить вид веб-страницы на одной странице без горизонтальной и вертикальной полосы прокрутки (также без скрытых данных).
Ниже приведены сценарии ios:
1) Мобильное представление: здесь мы видим рабочий стол (одна страница без полосы прокрутки), что не является проблемой, и поведение такое же, как и ожидалось.
2) Дисплей больше 13 дюймов : Мы получаем одностраничное отображение без полосы прокрутки, поэтому никаких проблем.
3) Дисплей от 10 дюймов до 13 дюймов: настоящая проблема заключается в том, что мы получаем полосу прокрутки с уровнем масштабирования 100%, который не ожидается. Ниже приведены наблюдения.
a) Самым первым наблюдением было то, что размер шрифта и отступ были объявлены в формате «px», который не изменялся при 10-дюймовом и более высоком экране шириной 1024 пикселя.
b) Мы объявили все в 'vh', отображение было идеальным, но тогда функция масштабирования не работала.
c) Итак, мы объявили все в 'rem' и написали медиа-запросы для обработки сценария, а затем code:
@media only screen and (min-width: 1024px) and (max-height:800px){
html{
font-size: 6px !important;
}}
Поскольку все объявлено в rem, изменение размера шрифта html меняет фактическое отображение тела, и, следовательно, проблема решается.
Фактическая проблема началась, когда мы начал масштабирование страницы, и запросы @media не применялись из-за изменения пикселов при масштабировании.
Будет очень полезно, если кто-то предоставит решение или ссылку, если он столкнулся с подобной проблемой. (Не требуется адаптивный дисплей, который не должен изменяться и должен размещаться на одной странице с изменением размера шрифта.)