Вопрос о верстке мобильной версии

12
staf888
На сайте с 07.10.2008
Offline
178
1070

Вопрос такой, нарисовали для сайта дизайн мобильной версии, причем для 3 разрешений экрана 880, 586, 290. При переходе между этими дизайнами сайт резиновый, при переходе через размер - элементы верстки как бы перепрыгивают.

Вопрос такой, взять хороший телефон, у него высокое разрешение экрана, больше 1000 пкс ширина. А размер экрана 5 дюймов. 880 - это для планшетов у нас. А выводиться соответственно будет на телефоне.

А по сути на нем бы хорошо показывать промежуточный дизайн - который под 586.

Как в таких случаях делают, если разрешением контролировать не получается, так как оно слишком большое.

ищу специалистов по скрытой рекламе на форумах и других сообществах.
D.iK.iJ
На сайте с 26.05.2013
Offline
239
#1

Сделать кнопочку "полная версия сайта" и по куки показывать другие стили, например.

Ну или пересмотреть разрешения. У меня резиновый дизайн сайтов. Мобильная версия начинается с экрана меньше 500px + есть некоторые изменения элементов на промежуточных стадиях и для экранов 350 и меньше.

В телефоне при вертикальном просмотре - мобильная версия, при горизонтальном - полная.

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
vlad00777
На сайте с 24.12.2009
Offline
119
#2
DiKiJ:
Сделать кнопочку "полная версия сайта" и по куки показывать другие стили, например.

Гугл пишет, что это не есть хорошо.

staf888:
при переходе через размер - элементы верстки как бы перепрыгивают.

Значит дизайнер не понимает что такое адаптивная верстка. Как вариант можно через jquery блоки переставлять, при необходимой ширине. А так через css все, через media.

Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.
staf888
На сайте с 07.10.2008
Offline
178
#3

Вопрос чуть другой.

Есть тел с диагональю 5.1 дюйма. Но разрешение больше 1000 px ширина.

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

Но, так как огромное разрешение, то сайт показывается с планшетной версией. То есть сайт не определяет размер экрана, а только разрешение. А ведь и на мобильном разрешение может быть больше, чем на компе.

Вопрос, как именно под размер экрана подстраивать, а не под разрешение экрана.

VHS
На сайте с 28.09.2007
Offline
142
VHS
#4

внезапно....

https://tech.yandex.ru/detector/

если нет понимания общей концепции, то в помощь

http://myresolutionis.ru/page/smapage.php

---------- Добавлено 10.04.2015 в 01:54 ----------

vlad00777:

Значит дизайнер не понимает что такое адаптивная верстка. Как вариант можно через jquery блоки переставлять, при необходимой ширине. А так через css все, через media.

Возможно дизайнер все понимает. Это поколение бутстрапа возможно не понимает, что такое дизайн. Возможно все.

totamon
На сайте с 12.05.2007
Offline
437
#5
staf888:
Есть тел с диагональю 5.1 дюйма. Но разрешение больше 1000 px ширина.
На нем сайт хорошо показывать, как мобильную версию, которая предусмотрена под ширину 580 например.

580 на экране в 1000 будет показываться на полэкрана) дело не в пикселях, а в пропорциях наверно

Домены и хостинг https://8fn.ru/regru | Дедик от 3000р https://8fn.ru/73 | VPS в Москве https://8fn.ru/72 | Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno | ХОСТИНГ №1 РОССИИ https://8fn.ru/beget
staf888
На сайте с 07.10.2008
Offline
178
#6
totamon:
580 на экране в 1000 будет показываться на полэкрана) дело не в пикселях, а в пропорциях наверно

Может и в пропорциях. Как их задать то? яндекс api детектор использовать и для каждой модели свое подставлять чтоль?

D
На сайте с 14.01.2007
Offline
153
#7
staf888:
Может и в пропорциях.

дело не в пропорциях, а device pixel ratio.

как пример у айфона 6+ dpr=3, т.е. он говорит вашему сайту, что у него разрешение 414*736, а не то что написано на сайте apple

staf888
На сайте с 07.10.2008
Offline
178
#8
Dinozavr:
дело не в пропорциях, а device pixel ratio.
как пример у айфона 6+ dpr=3, т.е. он говорит вашему сайту, что у него разрешение 414*736, а не то что написано на сайте apple

О, вот это уже совсем то, что надо похоже)

Может подскажете чуть подробнее про то, как это использовать?

Ayavryk
На сайте с 11.10.2003
Offline
209
#9
VHS:
Возможно дизайнер все понимает. Это поколение бутстрапа возможно не понимает, что такое дизайн. Возможно все.

Причем здесь поколение? Дизайнеры и 10 лет назад в основной массе не имели нормального образования ни сейчас. А уже тогда разница в разрешениях мониторов была достаточно большой.

Тынгыр, мынгыр, комсомол (http://erum.ru). Ехари, ехари, (жалобно) аяврик. /народная тунгусская песня/
D
На сайте с 14.01.2007
Offline
153
#10
Ayavryk:
Может подскажете чуть подробнее про то, как это использовать?

не понимаю вопроса, это нужно знать перед тем как делать адаптивную вёрстку для media queries

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий