@media screen and (orientation: portrait)

[PavelTkachev]

Насколько хорошо поддерживается браузерами свойство

@media screen and (orientation: portrait)

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

[wwt]

http://htmlbook.ru/css/value/media

[PavelTkachev]

Это я всё читал. И CanIUse.com смотрел. Может у кого-то есть реальный опыт использования?

[wwt]

Это я всё читал. И CanIUse.com смотрел. Может у кого-то есть реальный опыт использования?

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

[npofopr]

Это я всё читал. И CanIUse.com смотрел. Может у кого-то есть реальный опыт использования?

а там тогда какой опыт написан?) Информация предоставленная роботами?) 

[PavelTkachev]

На таких-то устройствах было обнаружено, что хотя монитор перевернул, но стили не поменялись.

[Switch74]

[PavelTkachev]

[Switch74]

если не устраивает как работает orientation: пробуйте проверять стороны, для портретки требуется, чтобы width был меньше height.

 

какие устройства вы пробовали переворачивать и при этом у вас происходила ли переориентация экрана?

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

[PavelTkachev]

В общем у меня есть список <li></li>. Мне надо, чтобы в портретном режиме он был по всей ширине экрана, а в альбомном был такой же, как в портретном. И при этом размер шрифта вычислялся исходя из этой самой ширины. Вот я и примеряюсь как этого добиться...

И при этом это ещё должно работать... Похоже только всё на JS?

[Switch74]

выбрать размер шрифта исходя из ширины - будет точно не плавное изменение или придется очень много media писать

не пробовал использовать проценты?

на рисунке было бы нагляднее и понятно что именно вы хотите сделать.

[PavelTkachev]

http://jsfiddle.net/rr9cnhwy/3/

 

Вот что я сварганил. Ширина элемента списка вычисляется из размера шрифта. Нужно теперь сделать это адаптивным под разные устройства размеры монитора.

Почему-то в FireFox при нечётном значении размера шрифта 30 символов оказываются длиннее инпута. Тогда как в IE всегда длинна совпадает.

Edited December 22, 2014 by PavelTkachev

[Switch74]

теперь вы хотите, чтобы в портретке, где вдруг может случайно оказаться меньше места чем вам требуется уменьшился шрифт в input так, чтобы он весь был виден?

 

в разных браузерах по разному округляется, где-то по правилам округления, где-то в большую или в меньшую сторону

[PavelTkachev]

Я хочу, чтобы ширина инпута равнялась 30 ширинам букв во всех браузерах. Взят специально моноширинный шрифт. Также чтобы не появлялся крестик на удаление всего текста в поле, так как он съедает 2 буквы. Такой крестик нужен, но в правом свободном отступе.

 

При портретной ориентации, чтобы использовалось 100% доступной ширины с учётом всех заданных отступов. А при альбомной ориентации, чтобы ширина была как в портретной.

Функционал формы не нужен. Я взял инпуты для удобства сериализации. Можно и без инпутов сделать. Если это поможет вёрстке.

Edited December 22, 2014 by PavelTkachev

[Switch74]

Ну для меня видится вариант с js:

проверяете размеры окна браузера исходя из размеров определяете ориентацию и выставляете соответствующую ширину

width=100% или width=screen_height

 

через медиа нужно будет много учитывать и мне кажется css получится большим

[PavelTkachev]

А вычислять ширину поля исходя из размера шрифта тоже через js? Или calc() подойдёт?

[SelenIT]

Ширина любого символа в моноширинном шрифте равна 1ch. Правда, как раз IE в этом глючит и считает по-особому...

[Switch74]

я бы вешал все изменения в одном месте, иначе при отключении css или js у вас все полетит, да и правки данного механизма не потребуют лазить по разным сайтам

[PavelTkachev]

Ширина любого символа в моноширинном шрифте равна 1ch. Правда, как раз IE в этом глючит и считает по-особому...

 

А что это за единица измерения такая? Один чих?

 

Когда задал ширину 30ch, то в FF всё исправилось. А в IE работать перестало...

 

 

я бы вешал все изменения в одном месте, иначе при отключении css или js у вас все полетит

 

Так в любом случае полетит либо отображение либо функционал.

У меня задача как можно меньше использовать JS, чтобы на старых смартфонах не тормозило.

А как вынести крестик стирания текста из инпут за пределы инпут? Или хотя бы как его отключить?

Edited December 22, 2014 by PavelTkachev

[Switch74]

ну вы не делайте анимации, а меняйте стили, расчеты там не слишком тяжелые вроде

[PavelTkachev]

ну вы не делайте анимации, а меняйте стили, расчеты там не слишком тяжелые вроде

 

Анимаций никаких не будет. А как сделать расчёты я пока не представляю. Надеялся, что CSS мне поможет. Как узать ширину символа в JS? Или это на сайте про JS спрашивать надо?

А ch - его все браузеры понимают?

Я сделал отдельный стиль для IE и в нём ширину посчитал через em. Для остальных браузеров сделал через ch.

[SelenIT]

Один чих?

Типа "1 character", наверное. По спецификации считается по ширине цифры «0», но в приличных шрифтах обычно все цифры одинаковой ширины (для удобства отображения в таблицах и т.п.), так что 1ch можно считать шириной любой цифры. А в моноширинных шрифтах — соответственно, шириной любого символа (по построению). Но IE, да, подвел.

[PavelTkachev]

Спасибо за помощь.

 

Кстати, проблема с крестиком решается вот так

input::-ms-clear {   display: none;}