Изменить размер веб-страницы по размеру экрана

Question

Изменить размер веб-страницы по размеру экрана

0

У меня есть веб-сайт, на котором я хочу следить за изменением размера окна браузера, чтобы он всегда соответствовал. Я пробовал использовать свойство css transform scale с коэффициентом, заданным текущей шириной окна, разделенной на ширину окна в полноэкранном режиме. Он перемасштабирует, но с ним что-то не так, потому что он оставляет белые блоки слева и справа от содержимого (поэтому он слишком сильно сжимает сайт и затем попадает в окно) Вот код javascript:

$(window).resize(function(){
           var ratio = $(window).width()/1340;
                $('body').css('transform','scale('+(ratio)+')');
                $('body').css('-ms-transform','scale('+(ratio)+')');
                $('body').css('-moz-transform','scale('+(ratio)+')');
                $('body').css('-webkit-transform','scale('+(ratio)+')');
   });

Есть ли лучший способ сделать страницу подходящей для окна (или сделать масштаб масштабирования должным образом)?

user1507558 25 окт. 2013, в 22:51

Источник

1

Да ... использовать медиа-запросы.
Paulie_D 25 окт. 2013, в 20:28
0

Вы рассматривали возможность использования полноэкранного API?
Gaurav 25 окт. 2013, в 20:29
0

Использование медиа-запросов означало бы перенастройку всего стиля, а полноэкранный интерфейс API все еще экспериментален. Я просто хочу знать, смогу ли я использовать этот конкретный трюк, чтобы дать мне правильный результат.
user1507558 25 окт. 2013, в 20:32
1

Зачем подвергать людей с узкими окнами нечитаемо маленькому тексту?
Quentin 25 окт. 2013, в 20:36

Показать ещё 2 комментария

Теги:

javascript

jquery

html

css

4 ответа

1

Чтобы сделать ваш сайт дружественным к мобильному телефону, вы должны действительно подумать о том, чтобы он реагировал с помощью мультимедийных запросов или с использованием некоторых интерфейсных платформ, таких как Bootstrap, Foundation и т.д.

Или, если вы просто хотите масштабировать свой веб-сайт, чтобы он не был горизонтально масштабирован и соответствовал пользовательскому экрану (независимо от того, насколько небольшой компонент вашего пользовательского интерфейса), вы можете сделать это, добавив следующий метатег в разделе "Глава".

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

Это заставит браузер сохранить масштаб веб-сайта настолько, чтобы он соответствовал ширине мобильного экрана.

Надеюсь, это поможет.

Janmejay Agrawal 17 дек. 2016, в 09:02

0

использование

<meta name="viewport" content="width=device-width,initial-scale=1.0">

в разделе Html head и

@media only screen and
(min-device-width : screen px) and
(max-device-width : screen px) {
    #id{style}
}

в CSS.

sundeep sharma 17 дек. 2016, в 10:19

0

вы можете использовать это, поместить в него весь контент

#wrapper{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    overflow:hidden;
}

Sobin Augustine 25 окт. 2013, в 18:35

Ещё вопросы

Да ... использовать медиа-запросы.
Вы рассматривали возможность использования полноэкранного API?
Использование медиа-запросов означало бы перенастройку всего стиля, а полноэкранный интерфейс API все еще экспериментален. Я просто хочу знать, смогу ли я использовать этот конкретный трюк, чтобы дать мне правильный результат.
Зачем подвергать людей с узкими окнами нечитаемо маленькому тексту?

Ryan Brackett · Accepted Answer · 2013-10-25T17-41-00.000Z

То, что вы хотите сделать, - это создать сайт с помощью адаптивных и адаптивных методов. Посмотрите, поможет ли эта ссылка! http://www.imediaconnection.com/content/33435.asp#singleview