#javascript #jquery #css #browser #mobile-safari
#javascript #jquery #css #браузер #mobile-safari
Вопрос:
Для широких страниц с масштабированием, где указано поведение starge для мобильных браузеров: $(window).height() (и document.documentElement.clientHeight) возвращает неверный heignt. Результат меньше, когда на самом деле. Разница составляет около 10%
Простая тестовая страница:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div style="width: 1200px">
<div class="test-block" style="background-color: red">
test block
</div>
</div>
<script type="application/javascript">
var h = $(window).height();
$('.test-block').css('height', h 'px');
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
page bottom<br/>
</body>
</html>
В результате красный прямоугольник имеет высоту меньше высоты окна
Все работает хорошо после удаления ширины: 1200px => Проблема с масштабированием страницы (автоматическая подгонка по ширине страницы).
Как получить правильную высоту окна для страницы с масштабированием?
window.innerHeight возвращает очень забавный результат после масштабирования.
Протестировано на iphone (safari и chrome), ipad, Android 4 (chrome). Для Opera mobile разница больше
Ответ №1:
Чтобы остановить масштабирование страницы, попробуйте добавить следующий тег в раздел head.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Вы можете получить ширину и впоследствии масштабировать ее с помощью JavaScript, если вам действительно нужно (чего делать не следует — вместо этого сделайте его отзывчивым).
Комментарии:
1. нет, для моего сайта требуется масштабирование. Это большой сайт, и я не могу быстро его адаптировать. Проблема только в одной функции, и я хочу ее исправить