HTML5 использование, успехи и неудачи

[webmos]

Ваш метод тоже вариант и имеет право быть. Я хочу попробовать решение, когда страница резиновая, а, начиная с какого-то разрешения экрана, происходит еще и перестройка макета: он становится узким для небольших экранов. Но когда мне в этой ветке напомнили про телефоны с пикселями 720 и выше при том же размере экрана, то возник вопрос, что задавать во вьюпорт. Задашь "по ширине экрана", размеры, заданные в пикселях и шрифты окажутся маленькими. Надо подумать насчет фиксированного значения, например, 480 пс. Пусть он (телефон) один CSS пиксель к нескольким свои физическим приравнивает.

 

[флоппик]

то есть для смартфонов вы не адаптируете? если ширина макета страницы на весь экран, то у смартфона будет либо полная страница на экране и все маленькое, либо придется увеличить и лазить по странице

Это нормально. Смартфоны давно уже по тапу увеличивают нужную область, причем делают это по умному.

 

[DIG]

Я хочу попробовать решение, когда страница резиновая, а, начиная с какого-то разрешения экрана, происходит еще и перестройка макета: он становится узким для небольших экранов.

Попробуйте погуглить бутстрап.

 

[webmos]

спасибо, погуглю) это, наверное, что-то типа Columnal? http://www.columnal.com/ (как раз сейчас с ним разбираюсь)
Про то, что смартфоны автоматически уменьшают, не знал - нету у меня его, старой Нокией пользуюсь
зато у Оперы на сайте есть возможность моделировать смартфон, вот этим и пользуюсь

 

[С.]

старой Нокией пользуюсь

Так вот откуда у тебя такие представаления о мобильном серфинге. Между старой Нокией и современными мобильными браузерами пропасть. Два попколения технологий уже сменилось. Новые проекты под "старую Нокию" никто, находящийся в здравом уме и памяти, создавать не будет.

 

[riff]

зато у Оперы на сайте есть возможность моделировать смартфон, вот этим и пользуюсь

У браузеров есть режим эмуляции экранов, разрешений, (в хроме телефонов и планшетов.)

 

[webmos]

с мобильным серфингом не знаком: Нокией в сеть не выхожу я пользуюсь вот этим инструментом для теста: http://www.opera.com/ru/developer/mobile-emulator

 

[riff]

Так вот откуда у тебя такие представаления о мобильном серфинге. Между старой Нокией и современными мобильными браузерами пропасть.

Теперь, по крайне мере, понятно от куда возник изначальный вопрос . Там не работает (видимо) "html5".

 

[riff]

http://www.columnal.com/ (как раз сейчас с ним разбираюсь)

html: <div class="row">float float float</div>
css:
.row {
clear: both;
width: 100%;
max-width: 1140px;
margin: 0 auto;
overflow: hidden;
}
Когда будет казаться, что всё хорошо, "overload:hidden" даст о себе знать.

 

[webmos]

откуда там overflow-то возникнет? Если дизайн адаптирован для маленьких экранов. Там страница показывается в читаемом размере по всему экрану.

 

[riff]

Я не про экраны, а про использование "overload:hidden" в разметке страницы (в этом columnal). Когда никакой элемент не может вырваться за пределы контейнера. Ни popup menu, ни всплывающая подсказка, ... Просто обратил твоё внимание - аккуратнее.

 

[webmos]

спасибо, буду знать) я вот не очень понимаю, откуда эти переполнения блоков берутся. вроде сайт-то люди верстают с учётом размеров содержимого. может, если шрифт сильно увеличить?

 

[riff]

спасибо, буду знать) я вот не очень понимаю, откуда эти переполнения блоков берутся. вроде сайт-то люди верстают с учётом размеров содержимого. может, если шрифт сильно увеличить?

Нет, (тут я не владею терминологией, искать времени нет, поэтому, кое как своими словами) контейнер просто не обращает внимание на размеры блока со стилем float и тот вырывается за нижнюю границу.
С указанием overload:hidden, контейнер или подстраивается под их(float) размеры или скрывает невлезающую часть (например при указании ему(контейнеру) height).

Элементы со стилем position:absolute, живут по своим законам, могут находиться где попало и вылезать где ни попадя, то под них вообще никто не подстраивается. Но и они не могут вылезти за overload:hidden у контейнера.
Так же за эти границы теряют возможность вылезать и другие "нормальные" элементы и такого ты уже не сделаешь.

Для замены overload:hidden можно использовать такое решение:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .row:after {
            clear: both;
            content: "";
            display: table; /* upd: не помню почему не block; */
        }
        .b1 {
            float: left;
            width: 33%;
        }
    </style>
</head>
<body>
    <div class="row">
        <div class="b1">aaa<br>aaa<br>aaa</div>
        <div class="b1">aaa<br>aaa<br>aaa</div>
    </div>
    <div class="row">
        <div class="b1">bbb<br>bbb<br>bbb</div>
        <div class="b1">bbb<br>bbb<br>bbb</div>
    </div>
</body>
</html>

Работает во всех браузерах начиная с восьмого осла и лисы 3.6, а идиоты, сидящие на старье, идут лесом.