CSS и HTML плохо рендерится на мобильных устройствах

Question

CSS и HTML плохо рендерится на мобильных устройствах

0

У меня есть страница, которую я создал, которая отлично работает на рабочем столе, но запуталась в мобильном браузере.

Это мобильная версия. У меня есть header и .container (тот с серым фоном), установленный на ширину 100%. Внутри .wrapper меня есть .wrapper установленный на width: 900px; и margin: 0 auto; , Почему синий фон и серый фон оказываются до половины страницы witdh? Каким образом я могу подойти к проблеме, чтобы создать такую же страницу, как и настольная версия на мобильном устройстве?

Lordking 02 окт. 2013, в 04:46

Источник

0

Ссылка Codepen codepen.io/tim-hoff/pen/ytGEw
Lordking 02 окт. 2013, в 02:14

Теги:

html

css

css3

website

mobile-website

3 ответа

0

Это ваша wrapper и ширина li. Установите их в процентах.

.wrapper {
    width: 90%;
    margin: 0 auto;
 }

 li {
    width: 30%;
    ....
 }

Tepken Vannkorn 02 окт. 2013, в 01:21

-1

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

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

Rajkumar 02 окт. 2013, в 01:10

Ещё вопросы

Shalom Aptekar · Accepted Answer · 2013-10-02T22-13-00.000Z

Я считаю, что ваша оболочка может вызвать проблему. Вместо установки фиксированной ширины для объекта выполните:

.wrapper {
    max-width:900px;
    width:100%;
    display:block; //for centering
    margin:0 auto // for centering

}

Должно решить вашу проблему и сделать сайт более отзывчивым на разных платформах. Удачи! :)

ЗАМЕТКА

Если вы еще этого не сделали, возьмите комментарий rajkumar и добавьте:

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