На 8 айфоне 375x667. Поэтому все верно работает
Айфон 8 - 750х1334. Это у вас не разрешение экрана айфон 8. Вы написали какие то другие виртуальные пиксели?
Вам говорится про логическое разрешение, а вы сообщаете физическое.
«Эпл» применяет теоретическое разрешение экрана в 750х1334 пикселей с тройной четкостью, соответствующее логическим размерам 375x667 точек.
Вот например базовые понятия
1 лайк
Хорошо. Тогда для других телефонов неЭпл, с таким же реальным размером экрана 750х1334 что нужно указывать в медиазапросе. Какие цифры?
Господа, почитал про Viewport, понял что муть непонятная.
Только один вопрос - в CS cart в основном указаны цифры 767px. Это цифра вьюпорт размер или реального размера экрана?
@media (max-width: 384px) {
.ut2-banner .ut2-a__bg-banner .ut2-a__content .ut2-a__title.weight-700 {
padding-bottom: 75px;
}
}
@media (max-width: 250px) {
.ut2-banner .ut2-a__bg-banner .ut2-a__content .ut2-a__title.weight-700 {
padding-bottom: 85px;
}
}
Нижний это маленький телефон андроид с экраном 480 на 1170. Изменение этого запроса вообще никак ничего не меняет.
Меняет и там и там только изменение верхнего запроса. Наверху айфон 8.
Может вьюпорт надо указывать только для айфона, а для андроида указывать реальный размер?
На 250 - это что-то древнее должно быть. Общие рекомендации - используйте до 480px для мобильных устройств и 767px для планшетов
Вы же сами мне айфон 8 уменьшили с реальной ширины 750 до 375. Поэтому я свой телефон шириной 480 уменьшил в 2 раза и получил 240. Вроде логично же. Или не? Нелогично?
Ставил я этот viewport размер, который 375 на айфон 8. На андроиде экраном 480px изменений уже не было. Был задан вопрос - может для андроида нужно указывать реальные размеры? Ответа так и не было.
И вы к Айфону не цепляйтесь, он был указан просто так, потому что там экран 750px. Не все люди пользуются айфоном 8.
Может для андроида нужно указывать реальные размеры а не viewport размер? Потому что у меня изменения на андроиде экраном 480px не появились.
Здравствуйте! Лучше стандартизировать размеры. Чтобы шаблон был гибким. Для каждого устройства свой медиа будет геморно, да и для оптимизации сайта будет плохо. Лучше изучите гипкие меры разработки шаблона.
1 лайк
Все работает, все медиазапросы работают.
Вот сайт посмотреть viewport своего устройства. What is my viewport
Планшет 1200 на 1920 имел вьюпорт размер всего 534 на 774. Айфон 8 750 х1334 вьюпорт= 375, а у андроид телефона 480 на 1170 = 320. Поэтому правило max-widht: 767 само одно покрывало все эти устройства. Поэтому я и не видел изменений. Они все попадали в группу 767.
И никто не попытался это разъяснить. Только какие то намеки что у айфон 8 viewport=375.
Для тех кто только столкнулся с этим. Viewport это не тупо деление ширины физического экрана на 2 или 3. Там цифры вообще все разные и вьюпорт у телефона разрешением 1200 может быть всего = 350.
В самом медиазапросе нужно писать цифру реальной ширины, но учитывая что для моего планшета 1200 на 1920 нужно всего 534 по горизонтали. У другого устройства эта цифра может быть другой. В зависимости от того какая плотность пикселей.
Для того, кто хочет сказать что тебе же писали об этом. Прочтите сообщения в теме и покажите мне где кто то что то разъяснил.
В гибком дизайне размеры указываются не в пикселях, а в процентах. Если размер экрана изменяется, пропорции элементов остаются неизменными. А медиа указываете для модбильной версии и пк внутри них дизайн должен быть гибким. Например берем айфон 8 и 15 у них дюймы другие. При открытии гибкого дизайна шаблона сайт будет одиноковым она будет зависеть от процентного соотношения экрана устройства. Вам не нужно будет под каждый экран писать в css и тд. Советую нанять специалиста по верстке и сделать правки. В uni вроде там все в основном пиксельные размеры.
1 лайк
Ну слушайте, в cs cart много где написана цифра 767px.
Медиа не надо делать процентами. Есть много статьей как сделать мобильную версию. Или вообще не трогайте media потому что она настроена. Просто все блоки и тд переведите в проценты из пикселей. Тогда у вас смещение блоков и тд не будет. А если вообще хотите весь дизайн поменять пишите модуль который будет делать css или less код поверх основного дизайна unitheme. Мобильные все меньше 480. Допустим вы хотите сделать:
@media screen and (max-width: 900px){
}
@media screen and (max-width: 480px){
}
мобильная версия будет начинаться из 479
На самом деле что проценты, что пиксели - не самый удобный вариант. Сравните экран десктопа 1200px по ширине, и экран мобилы с физическим разрешением 1200px. То есть в обоих случаях вёрстка окажется одна и та же. Только на десктопе вы все нормально увидите, а на мобиле вам понадобится лупа. Поэтому лучший вариант для адаптивной вёрстки конечно поинты, которые как раз и зависят от плотности пикселей на дюйм.
Ну я и говорю то что на мобиле нужно отдельный. Поинтами я не работал можно было бы попробовать. А так вообще перевели бы разрабы uni и тд шаблоны на tailwild было бы не плохо.
Ага, тоже об этом давно писал, что надо для мобилы отдельный шаблон, определять устройство и в зависимости от этого отдавать нужный. А то сейчас грузим что для десктопа, что для мобилы кучу лишних блоков которые просто прячем. То есть грузим инфы в полтора раза больше чем показываем.
В самом медиазапросе нужно писать цифру реальной ширины, но учитывая что для моего планшета 1200 на 1920 нужно всего 534 по горизонтали.
И зачем всё это, если есть как вы говорите “эмулятор”? На десктопе у нас 1 к 1, просто сверстайте шаблон красиво во всех разрешениях — и сайт будет выглядеть красиво на всех устройствах.
_
В гибком дизайне размеры указываются не в пикселях, а в процентах.
Вы так ТСа ещё больше запутаете. Это сетка делается в процентах, и при разных разрешениях экрана проценты в сетке разные. Uni, кстати, используют bootstrap, древний…
_
Сравните экран десктопа 1200px по ширине, и экран мобилы с физическим разрешением 1200px. То есть в обоих случаях вёрстка окажется одна и та же.
Нет же. ТС нам тут целое расследование провёл и пришёл к выводу, что вёрстка будет разная.
_
Поэтому лучший вариант для адаптивной вёрстки конечно поинты
Я может чёто пропустил, но такой единицы измерения нет. Есть px, %, fr, pt, em, rem, cm, in, а есть брейкпоинты — точки отсечения в медиазапросах @media (min-width: 640px)
_
перевели бы разрабы uni и тд шаблоны на tailwild
Блевотина получится редкостная… Чтобы сверстать одну кнопку в одной форме нужно применить 20 классов! Вы видели структуру шаблона cs-cart? — более 600 файлов — попробуй отлови там все кнопки. А сторонние разработчики как будут делать шаблоны своих модулей?
Вместо responsive и jquery-ui нужен “унифицированный” фреймворк вроде bootstrap 5, uikit или что-то такое, чтобы и табы и модалки и скроллеры — всё в одном дизайне с одинаковым кодом.
_
…надо для мобилы отдельный шаблон… А то сейчас грузим что для десктопа, что для мобилы кучу лишних блоков которые просто прячем.
От отдельных шаблонов наоборот все ушли в адаптивную верстку. И сейчас никто не мешает определять устройство и не грузить лишние блоки — AB же так и делают, например. А у меня, например, самописные шаблоны, где только пара блоков меню скрываются/появляются, все остальное адаптивное.