Увеличьте и поместите сайт в телефонах

Question

Увеличьте и поместите сайт в телефонах

0

Перед этим я сталкиваюсь с некоторыми проблемами. Я создал тему, которая реагирует. Таким образом, он подходит для любого устройства с любым разрешением. Мой клиент хочет, чтобы он не реагировал. Это означает, что он показывает на рабочем столе, он должен показывать одинаково везде.

Все в порядке, если я открываю сайт по телефону, он показывает полосу прокрутки (что должно быть связано с ее фиксированной шириной), но я хочу, чтобы она уменьшала масштаб и соответствовала экрану. Я видел много ответов, в которых говорится о том, чтобы использовать viewport следующим образом:

<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Но это не сработало. Если я сниму вручную с моего iphone, он работает отлично.

Я установил ширину контейнера как 1230px. Я не могу установить это на 100%. Есть ли способ достичь этого?

Демо-сайт: http://fixar.co.uk/

Abhishek Saha 03 март 2014, в 20:48

Источник

0

Если ваш клиент хочет, чтобы он был оптимизирован только для настольных компьютеров, просто удалите медиазапрос. Или, если это не сработает, просто установите initial = scale = 2 или что-то в этом роде.
TylerH 03 март 2014, в 19:46
0

Это не решило проблему
Abhishek Saha 03 март 2014, в 19:50
0

Можете ли вы быть более конкретным в своем запросе? Вы хотите, чтобы сайт был увеличен до максимального увеличения при просмотре с мобильного устройства?
TylerH 03 март 2014, в 19:51
0

Я извиняюсь, если я не был ясен Когда сайт загружается на телефон, сейчас у него есть полосы прокрутки. Я хочу увеличить масштаб, пока полоса прокрутки не исчезнет. В основном, пока он не умещается на экране.
Abhishek Saha 03 март 2014, в 19:55
0

Если у вас уже есть полосы прокрутки, то я думаю, что вы хотите уменьшить масштаб, пока полосы прокрутки больше не будут там. Убедитесь, что вы используете overflow: auto; и не overflow: scroll; в любом месте вашего кода. Однако будет трудно изолировать проблему без дополнительного кода в исходном сообщении, которое мы могли бы осмотреть.
TylerH 03 март 2014, в 19:58
0

Кроме того, вы можете установить initial-scale=0.5 чтобы увеличить загрузку страницы на 50%.
TylerH 03 март 2014, в 20:00
0

Именно так. Я попробовал это. Даже это не сработало. Похоже, не признает значение начального масштаба
Abhishek Saha 03 март 2014, в 20:28

Показать ещё 5 комментариев

Теги:

jquery

html

html5

css3

2 ответа

1

Вы можете установить ширину, соответствующую ширине вашей темы сайта:

<meta id="viewport" name="viewport" content="width=960, initial-scale=1, maximum-scale=1">

isherwood 03 март 2014, в 17:51

Ещё вопросы

Если ваш клиент хочет, чтобы он был оптимизирован только для настольных компьютеров, просто удалите медиазапрос. Или, если это не сработает, просто установите initial = scale = 2 или что-то в этом роде.
Можете ли вы быть более конкретным в своем запросе? Вы хотите, чтобы сайт был увеличен до максимального увеличения при просмотре с мобильного устройства?
Я извиняюсь, если я не был ясен Когда сайт загружается на телефон, сейчас у него есть полосы прокрутки. Я хочу увеличить масштаб, пока полоса прокрутки не исчезнет. В основном, пока он не умещается на экране.
Если у вас уже есть полосы прокрутки, то я думаю, что вы хотите уменьшить масштаб, пока полосы прокрутки больше не будут там. Убедитесь, что вы используете overflow: auto; и не overflow: scroll; в любом месте вашего кода. Однако будет трудно изолировать проблему без дополнительного кода в исходном сообщении, которое мы могли бы осмотреть.
Кроме того, вы можете установить initial-scale=0.5 чтобы увеличить загрузку страницы на 50%.
Именно так. Я попробовал это. Даже это не сработало. Похоже, не признает значение начального масштаба

Abhishek Saha · Accepted Answer · 2014-03-03T18-44-00.000Z

Я получил ответ из ссылки. Как вы динамически изменяете масштаб с помощью Javascript?

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}