PavelTkachev Posted December 22, 2014 Report Share Posted December 22, 2014 Насколько хорошо поддерживается браузерами свойство@media screen and (orientation: portrait)В интернете много примеров с шириной или высотой, поэтому я усомнился в широкой поддержке ориентации. Я зря волнуюсь? Quote Link to comment Share on other sites More sharing options...
0 wwt Posted December 22, 2014 Report Share Posted December 22, 2014 http://htmlbook.ru/css/value/media Quote Link to comment Share on other sites More sharing options...
0 PavelTkachev Posted December 22, 2014 Author Report Share Posted December 22, 2014 Это я всё читал. И CanIUse.com смотрел. Может у кого-то есть реальный опыт использования? Quote Link to comment Share on other sites More sharing options...
0 wwt Posted December 22, 2014 Report Share Posted December 22, 2014 Это я всё читал. И CanIUse.com смотрел. Может у кого-то есть реальный опыт использования?Вы написали что усомнились в широкой поддержке, я дал вам ссылку на страницу где перечислены версии браузеров которые поддерживают медиазапросы, и в том числе ориентацию =) Quote Link to comment Share on other sites More sharing options...
0 npofopr Posted December 22, 2014 Report Share Posted December 22, 2014 Это я всё читал. И CanIUse.com смотрел. Может у кого-то есть реальный опыт использования? а там тогда какой опыт написан?) Информация предоставленная роботами?) Quote Link to comment Share on other sites More sharing options...
0 PavelTkachev Posted December 22, 2014 Author Report Share Posted December 22, 2014 На таких-то устройствах было обнаружено, что хотя монитор перевернул, но стили не поменялись. 1 Quote Link to comment Share on other sites More sharing options...
0 Switch74 Posted December 22, 2014 Report Share Posted December 22, 2014 Quote Link to comment Share on other sites More sharing options...
0 PavelTkachev Posted December 22, 2014 Author Report Share Posted December 22, 2014 Quote Link to comment Share on other sites More sharing options...
0 Switch74 Posted December 22, 2014 Report Share Posted December 22, 2014 если не устраивает как работает orientation: пробуйте проверять стороны, для портретки требуется, чтобы width был меньше height. какие устройства вы пробовали переворачивать и при этом у вас происходила ли переориентация экрана?на мобильных устройствах практически всех отрабатывает норм, при условии, что поворот экрана разрешен. Quote Link to comment Share on other sites More sharing options...
0 PavelTkachev Posted December 22, 2014 Author Report Share Posted December 22, 2014 В общем у меня есть список <li></li>. Мне надо, чтобы в портретном режиме он был по всей ширине экрана, а в альбомном был такой же, как в портретном. И при этом размер шрифта вычислялся исходя из этой самой ширины. Вот я и примеряюсь как этого добиться...И при этом это ещё должно работать... Похоже только всё на JS? Quote Link to comment Share on other sites More sharing options...
0 Switch74 Posted December 22, 2014 Report Share Posted December 22, 2014 выбрать размер шрифта исходя из ширины - будет точно не плавное изменение или придется очень много media писатьне пробовал использовать проценты?на рисунке было бы нагляднее и понятно что именно вы хотите сделать. Quote Link to comment Share on other sites More sharing options...
0 PavelTkachev Posted December 22, 2014 Author Report Share Posted December 22, 2014 (edited) http://jsfiddle.net/rr9cnhwy/3/ Вот что я сварганил. Ширина элемента списка вычисляется из размера шрифта. Нужно теперь сделать это адаптивным под разные устройства размеры монитора.Почему-то в FireFox при нечётном значении размера шрифта 30 символов оказываются длиннее инпута. Тогда как в IE всегда длинна совпадает. Edited December 22, 2014 by PavelTkachev Quote Link to comment Share on other sites More sharing options...
0 Switch74 Posted December 22, 2014 Report Share Posted December 22, 2014 теперь вы хотите, чтобы в портретке, где вдруг может случайно оказаться меньше места чем вам требуется уменьшился шрифт в input так, чтобы он весь был виден? в разных браузерах по разному округляется, где-то по правилам округления, где-то в большую или в меньшую сторону Quote Link to comment Share on other sites More sharing options...
0 PavelTkachev Posted December 22, 2014 Author Report Share Posted December 22, 2014 (edited) Я хочу, чтобы ширина инпута равнялась 30 ширинам букв во всех браузерах. Взят специально моноширинный шрифт. Также чтобы не появлялся крестик на удаление всего текста в поле, так как он съедает 2 буквы. Такой крестик нужен, но в правом свободном отступе. При портретной ориентации, чтобы использовалось 100% доступной ширины с учётом всех заданных отступов. А при альбомной ориентации, чтобы ширина была как в портретной.Функционал формы не нужен. Я взял инпуты для удобства сериализации. Можно и без инпутов сделать. Если это поможет вёрстке. Edited December 22, 2014 by PavelTkachev Quote Link to comment Share on other sites More sharing options...
0 Switch74 Posted December 22, 2014 Report Share Posted December 22, 2014 Ну для меня видится вариант с js:проверяете размеры окна браузера исходя из размеров определяете ориентацию и выставляете соответствующую ширинуwidth=100% или width=screen_height через медиа нужно будет много учитывать и мне кажется css получится большим Quote Link to comment Share on other sites More sharing options...
0 PavelTkachev Posted December 22, 2014 Author Report Share Posted December 22, 2014 А вычислять ширину поля исходя из размера шрифта тоже через js? Или calc() подойдёт? Quote Link to comment Share on other sites More sharing options...
0 SelenIT Posted December 22, 2014 Report Share Posted December 22, 2014 Ширина любого символа в моноширинном шрифте равна 1ch. Правда, как раз IE в этом глючит и считает по-особому... Quote Link to comment Share on other sites More sharing options...
0 Switch74 Posted December 22, 2014 Report Share Posted December 22, 2014 я бы вешал все изменения в одном месте, иначе при отключении css или js у вас все полетит, да и правки данного механизма не потребуют лазить по разным сайтам Quote Link to comment Share on other sites More sharing options...
0 PavelTkachev Posted December 22, 2014 Author Report Share Posted December 22, 2014 (edited) Ширина любого символа в моноширинном шрифте равна 1ch. Правда, как раз IE в этом глючит и считает по-особому... А что это за единица измерения такая? Один чих? Когда задал ширину 30ch, то в FF всё исправилось. А в IE работать перестало... я бы вешал все изменения в одном месте, иначе при отключении css или js у вас все полетит Так в любом случае полетит либо отображение либо функционал.У меня задача как можно меньше использовать JS, чтобы на старых смартфонах не тормозило.А как вынести крестик стирания текста из инпут за пределы инпут? Или хотя бы как его отключить? Edited December 22, 2014 by PavelTkachev Quote Link to comment Share on other sites More sharing options...
0 Switch74 Posted December 22, 2014 Report Share Posted December 22, 2014 ну вы не делайте анимации, а меняйте стили, расчеты там не слишком тяжелые вроде Quote Link to comment Share on other sites More sharing options...
0 PavelTkachev Posted December 22, 2014 Author Report Share Posted December 22, 2014 ну вы не делайте анимации, а меняйте стили, расчеты там не слишком тяжелые вроде Анимаций никаких не будет. А как сделать расчёты я пока не представляю. Надеялся, что CSS мне поможет. Как узать ширину символа в JS? Или это на сайте про JS спрашивать надо?А ch - его все браузеры понимают?Я сделал отдельный стиль для IE и в нём ширину посчитал через em. Для остальных браузеров сделал через ch. Quote Link to comment Share on other sites More sharing options...
0 SelenIT Posted December 22, 2014 Report Share Posted December 22, 2014 Один чих?Типа "1 character", наверное. По спецификации считается по ширине цифры «0», но в приличных шрифтах обычно все цифры одинаковой ширины (для удобства отображения в таблицах и т.п.), так что 1ch можно считать шириной любой цифры. А в моноширинных шрифтах — соответственно, шириной любого символа (по построению). Но IE, да, подвел. 1 Quote Link to comment Share on other sites More sharing options...
0 PavelTkachev Posted December 22, 2014 Author Report Share Posted December 22, 2014 Спасибо за помощь. Кстати, проблема с крестиком решается вот такinput::-ms-clear { display: none;} Quote Link to comment Share on other sites More sharing options...
Question
PavelTkachev
Насколько хорошо поддерживается браузерами свойство
В интернете много примеров с шириной или высотой, поэтому я усомнился в широкой поддержке ориентации. Я зря волнуюсь?
Link to comment
Share on other sites
22 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.