Сайт не подходит для iphone
Мой сайт: http://independenttruckersgroup.com/. Это фиксированная ширина, неотвечающая страница. Как сделать так, чтобы оно вписывалось в полноэкранный режим при просмотре с iphone? Протестировано на рабочем столе браузера под Windows, IPad и Android. Все может хорошо вписаться в полный экран. Но это не удалось при тестировании с использованием браузера под Mac или iphone. Горизонтальный скроллер появится в iphone или браузере под Mac.
Для заметки ширина, которую я использую, составляет 1903 пикселя. Я прочитал, что ширина iphone по умолчанию составляет 980 пикселей. Я также читал, что, когда ширина больше, чем 980 пикселей, обычно она автоматически уменьшается, чтобы соответствовать экрану. Таким образом, элементы станут меньше, но горизонтальный скроллер не появится. Вот чего я пытаюсь достичь. Я пробовал использовать метатег в области просмотра, но не повезло с результатом.
Ценю любую помощь по этому вопросу. Благодарю.
2 ответа
Наконец-то получил его на работу. Вот код Я обертываю тело подгонкой. Надеюсь, что это помогает другим с похожей проблемой:
app.fn.autofit = function() {
// initial fixed width
var minW = 1903;
if ($(window).width() < minW) {
var ratio = $(window).width() / minW;
// For chrome and safari, use zoom
var detect = navigator.userAgent.toLowerCase();
if((detect.indexOf('chrome') + 1) || (detect.indexOf('safari') + 1)) {
$(document.body).css('zoom', ratio);
} else {
// Other browser that doesn't support zoom, use -moz-transform to scale and compensate for lost width
$('#fit-wrap').css('-webkit-transform', "scale(" + ratio + ")");
$('#fit-wrap').css('-moz-transform', "scale(" + ratio + ")");
$('#fit-wrap').css('-ms-transform', "scale(" + ratio + ")");
$('#fit-wrap').css('transform', "scale(" + ratio + ")");
$('#fit-wrap').width($(window).width() / ratio + 10);
}
} else {
$(document.body).css('zoom', '');
$('#fit-wrap').css('-webkit-transform', "");
$('#fit-wrap').css('-moz-transform', "");
$('#fit-wrap').css('-ms-transform', "");
$('#fit-wrap').css('transform', "");
$('#fit-wrap').width("");
}
}
// init autofit
app.fn.autofit();
// Resized based on screen size
app.el['window'].resize(function() {
app.fn.autofit();
});
Вы пытались изменить атрибут начального масштаба метатега "viewport" через JS?
<meta id="viewportElement" name="viewport" content="width=1903"/>
<script type="text/javascript">
function changeViewportInitialScale() {
var ratio = 1,
minWidth = 1903,
windowOuterWidth = window.outerWidth;
if (windowOuterWidth < minWidth) {
ratio = windowOuterWidth / minWidth;
}
viewportElement.setAttribute("content", "initial-scale=" + ratio);
}
changeViewportInitialScale();
</script>
Тег скрипта с этим начальным изменением масштаба должен идти сразу после метатега. После этого вы можете прикрепить его к слушателю событий изменения размера окна практически везде в вашем коде.
Для меня это работает как шарм на любом устройстве, я попробовал это на.