Помогите, пожалуйста, с версткой. Проблема отображения.

Stranger · February 25, 2014

Помогите, пожалуйста, с проблемой.

Есть какой то конкретный каркас. Я задаю контейнеру (там, где будет находиться весь контент), предположим, ширину в 1024px. При этом хочу сделать верхнюю строку на всю ширину экрана, то есть, я помещаю его НЕ в контейнер и задаю определенную высоту и width=100%.

И тут возникает проблема - если экран, предположим, >1024, то полоса без проблем тянется, но стоит открыть верстку в разрешении, например, с iPad или с любого другого мобильного устройства, или при просмотре через эмулятор мобильных устройств, эта полоса внезапно прерывается.При чем, это происходит, если делаю, например, background:url("какой-то путь") repeat-x transparent;

Такая же проблема и в футере.

Надеюсь, понятно объяснил.

Помогите, пожалуйста, уже весь мозг сломал, но задачу не решил, к сожалению.

<!DOCTYPE html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>Main</title>    <meta name="description" content="">    <meta name="keywords" content="">    <meta name="viewport" content="width=device-width; initial-scale=1">    <!--<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>-->    <style>        body{            margin:0px;            padding:0px;        }        .stripe{            height:50px;            width:100%;            background-color:black;        }        .red{            height:400px;            width:100%;            background-color:red;        }        .container{            width:1024px;            margin:0 auto;        }    </style></head><body><div class="stripe"></div><div class="container">    <ul>        <li><a href="">Пункт 1</a></li>        <li><a href="">Пункт 2</a></li>        <li><a href="">Пункт 3</a></li>    </ul>    <div class="red"></div></div></body></html>

Great Rash · February 25, 2014

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Stranger · February 25, 2014

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Посмотрел. Поставил Firefox OS Simulator, чтоб смотреть на поведение верстки. Но не добился результата.

Подскажите, пожалуйста, на конкретном примере. Был бы очень признателен.

Great Rash · February 25, 2014

Как я вам покажу на конкретном примере? Я же не могу прям в мобиле вам показать. Единственное за что цепляется глаз это то, что <meta> должны идти перед <title>, а не после него. Ну и замените <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> на <meta charset="utf-8"> - это правда к делу не относится.

Stranger · February 25, 2014

Как я вам покажу на конкретном примере? Я же не могу прям в мобиле вам показать. Единственное за что цепляется глаз это то, что <meta> должны идти перед <title>, а не после него. Ну и замените <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> на <meta charset="utf-8"> - это правда к делу не относится.

Возможно, я криво объясняю. Попробую еще раз. Если я задаю stripe ширину равную 100%, то при просмотре с мобильного устройства контейнер (красная область) скролится вправо, при этом .stripe не продолжается на ширину контейнера, а находится только в видимой области экрана (скрол есть, красный контейнер есть, а вот .stripe - нету)

Great Rash · February 25, 2014

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

Stranger · February 25, 2014

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

То есть, если я правильно понял, есть два выхода:

1. Делать полностью адаптив.

2. При фиксированной верстке делать для .stripe min-width:1024, что б при скролле он отображался хотя бы полноценно.

Правильно я понимаю?

Great Rash · February 25, 2014

1. Или адаптив или резину. По идее должен помочь <meta name="viewport" content="width=device-width; initial-scale=1">, т.к. экран iPad явно шире чем 1024 (по крайней мере в альбомной ориентации). Может быть плагин для FF в котором вы тестируете глючит? Вы смотрели на реальном устройстве? Попробуйте Opera Mobile Emulator. Можно еще потестить на андроиде.

2. Для .stripe не надо вообще ширину задавать, т.к. блочные элементы автоматически растягиваются на всю ширину <body>.

Stranger · February 25, 2014

1. Или адаптив или резину. По идее должен помочь <meta name="viewport" content="width=device-width; initial-scale=1">, т.к. экран iPad явно шире чем 1024 (по крайней мере в альбомной ориентации). Может быть плагин для FF в котором вы тестируете глючит? Вы смотрели на реальном устройстве? Попробуйте Opera Mobile Emulator. Можно еще потестить на андроиде.

2. Для .stripe не надо вообще ширину задавать, т.к. блочные элементы автоматически растягиваются на всю ширину <body>.

Спасибо за совет. Но для фиксированного шаблона получилось эту чертову полосу сделать только указав min-aidth равный контейнеру, тогда при скролле полоса не пропадает. Может, конечно, костыли, но пока ничего лучше и не нашел.

Sign In

Помогите, пожалуйста, с версткой. Проблема отображения.

Question

Stranger

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

Stranger

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Stranger

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Stranger

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Stranger

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information