Как сделать такой же макет сайта для мобильных устройств (не реагирует)
Я устал от поиска ответа на вопрос. Я хочу веб-сайт, который можно увидеть с мобильного или аналогичного устройства. Я не имею в виду отзывчивость, а имею в виду, что с мобильного посетителя можно увидеть тот же макет сайта даже при горизонтальной прокрутке мыши. Это возможно для каждого сайта. Не нужно никакого кода для этого. Такая же раскладка обычно видна на мобильном телефоне с горизонтальной прокруткой мыши. Но я обеспокоен одним сценарием. Я построил пример. Вот..
Если вы видите этот веб-сайт с мобильного или аналогичного устройства, такого как небольшой ноутбук и т. Д. (Или изменяете размер для небольшого браузера), вы увидите следующее:
Вы видите, что синий div не может заполнить 100% ширину браузера, хотя этот div был определен с шириной 100%! Посмотрите серый div ниже части этих изображений. На нормальной стадии синий (div.top) и серый (div#gcontent) div - это центр браузера, но на маленьком экране серый div заполняет 100% ширину, а синий div не может заполнить 100% ширину. В чем причина. Как я могу это исправить?
структура этого:
<body>
<!-- top start -->
<div class="outer top">
<div class="inner">
<div class="nav">
<p>Lorem Ipsum is simply dummy text .... of Lorem Ipsum.</p>
</div>
</div>
</div>
<!-- top end -->
<!-- wrapper start -->
<div class="wrapper">
<!-- header start -->
<div id="header">
<div class="logo">
<a href="index.html"><img src="images/logo.png" width="124" height="104" alt="logo" /></a>
</div>
<h1>WELCOME</h1>
</div>
<!-- header end -->
<!-- content start -->
<div id="content">
<P>Lorem Ipsum is simply dummy text ... of Lorem Ipsum.</P>
<P>Lorem Ipsum is simply dummy text ... of Lorem Ipsum.</P>
<P>Lorem Ipsum is simply dummy text ... of Lorem Ipsum.</P>
</div>
<!-- content end -->
</div>
<!-- wrapper end -->
</body>
CSS:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
border: 0 none;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}
a {
text-decoration: none;
color: #fff;
}
.clear { clear: both; }
body {
background: url(../images/bg.png) repeat-x #fff;
color: #000;
font-family: Helvetica, Myriad Pro, Verdana;
font-size: 14px;
line-height: 1em;
}
.outer {
width: 100%;
float: left;
display: block;
}
.top {
background: #009999;
}
.inner {
width: 940px;
margin: 0 auto;
}
.wrapper {
width: 940px;
margin: 0 auto;
text-align: left;
}
#header {
width: 100%;
float: left;
}
h1 { font-weight: normal; }
h2 { font-size: 22px; font-weight: normal; }
h3 { font-size: 15px; font-weight: normal; }
p { font-size: 12px; }
.logo a {
display: block;
width: 124px;
height: 104px;
margin: 31px 46px 0 10px;
float: left;
}
#header h1 {
font-size: 23px;
text-transform: uppercase;
font-family: 'HelveticaNeueLTStd-Bd-75';
color: #004481;
padding: 110px 0 33px 0;
}
#content {
width: 100%;
float: left;
background: #b2b0b0;
margin: 0 0 200px 0;
-moz-box-shadow: 1px 0 5px 5px #acacac;
-webkit-box-shadow: 1px 0 5px 5px #acacac;
box-shadow: 1px 0 5px 5px #acacac;
}
Я задал подобный тип вопроса здесь до нескольких дней. Но я не нашел решения. Кто-то сказал мне проблему с внутренним div(ширина: 940 пикселей), который создает эту проблему для маленького экрана. Но моя точка зрения - синий div(div.top) находится на внешнем div, ширина которого равна 100%. Итак, почему внутренний div отвечает за это! Кто-то сказал мне сделать другую таблицу стилей для маленького экрана. Хотя я не могу понять проблему, но разве решение не должно быть простым? Но, если, наконец, это единственное решение для создания другой таблицы стилей для небольшого экрана, то каким будет код для этого сценария? По сути, я делаю сайт с подобной структурой, где мне нужно много этого:
.outer {
width: 100%;
float: left;
}
.inner {
width: 940px;
margin: 0 auto;
}
Я не хочу, чтобы этот сайт был адаптивным. Но, по крайней мере, посетитель не должен видеть этот сценарий (синий или div.top: width: 100% не может заполнить 100% браузера) с мобильного телефона. Поэтому, пожалуйста, просто дайте мне решение заполнить браузер на 100% шириной этого синего делителя для любого маленького экрана простым способом. Мне кажется, что добавление одного или двух строк кода этого внешнего div может решить проблему, но я не знаю, что это за код:(Заранее спасибо!
3 ответа
Если вы установите правило, как width: 100%;в этом случае, для того, как выполняется ваша CSS, 100% зависит от размера браузера, а не от фактической ширины сайта. Ваш сайт становится шириной около 940pxНо на мобильном телефоне размер браузера меньше.
Просто попробуйте добавить правило так:
html {
min-width: 940px;
}
Наверное, этого достаточно.
Используя min-widthвместо простого widthв случае браузера с большей шириной (например, на рабочем столе) сайт будет выглядеть так же, как и сейчас, и корректировка будет применяться только к браузерам с меньшей шириной.
Просто добавьте это в заголовок вашего HTML
<meta name='viewport' content='width=device-width, initial-scale=1 />
Проблема в том, что div с синим фоном также имеет ширину 100%. Если ширина 100% меньше 940 пикселей, синий фон будет меньше, чем div, содержащий текст. Вы можете изменить сайт так, чтобы не было фиксированной ширины 940 пикселей, или применить top класс к тому же div, который содержит текст (с inner учебный класс).