Отзывчивый веб-дизайн для всех различных устройств - PullRequest
Новая
       6

Отзывчивый веб-дизайн для всех различных устройств

0 голосов
/ 13 июня 2019

У меня около 5 лет опыта работы веб-разработчиком. Но иногда у меня возникает этот вопрос, и я не могу ответить на него сам. В настоящее время существует так много устройств с разными разрешениями экрана, как в альбомной, так и в портретной ориентации и т. Д.

Я все еще работаю с контрольными точками Bootstrap (1200px, 1024px, 768px и для мобильных устройств, я использую максимальную ширину 480px), но недавно у меня были некоторые проблемы с моими веб-сайтами, потому что клиент использует в качестве примера huawai или какой-нибудь смартфон, который не так популярен, как iphone, и веб-сайт не был оптимизирован для этого конкретного смартфона.

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

Ответы [ 3 ]

0 голосов
/ 13 июня 2019

Иногда вам нужно сделать некоторые "исправления" для некоторых устройств.

Один из способов решить эту проблему - получить пользовательский агент: 

$_SERVER['HTTP_USER_AGENT'];

, после этого вы можете использовать регулярное выражениеили загрузите их в массив в соответствии с пользовательским агентом или устройством:

пользовательские агенты в массиве: 

$mobile_agents = array('w3c ','acs-','and','so', 'on');

для устройств: 

$regex_match.= "htc|huawei";

теперь, когда страницаможет обнаружить пользовательский агент, страница также может выдавать конкретные таблицы стилей / медиа-запросы для устройств.

Это простой пример в php, и вы также можете группировать устройства и пользовательских агентов.

0 голосов
/ 13 июня 2019

Для действительно адаптивного дизайна избегайте использования точек останова, влияющих на стиль. Уже есть слишком много возможностей и гораздо больше возможностей для любого, чтобы когда-либо понять это правильно.

Единственное, что я нашел для запросов размера @media:

Проверьте соотношение сторон, чтобы определить, находится ли оно в альбомной или книжной ориентации. 

@media (max-aspect-ratio 1/1) { ...

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

@media  screen and (max-width: 6in) {
    a { line-height: 200%; }  /* fat-finger clickables */
    input[type=radio] { margin: .5em; }
}

И, конечно же, во всех ваших CSS-кодах не забывайте никогда не использовать абсолютные единицы и всегда использовать относительные единицы (%, em, vh, vw).

0 голосов
/ 13 июня 2019

Работа для клиентов с несколькими устройствами может быть чем-то вроде кошмара ... В будущем вы можете попросить вашего клиента предоставить вам спецификацию приложения, которое вы создаете, и целевых устройств (даже для модель).

Я использую приведенную ниже страницу в качестве справочного материала для создания очень специфических медиа-запросов или в целом, как вы хотите.

https://css -tricks.com / сниппеты / CSS / медиа-запросов, для нестандартных-устройств / # телефон-запросов

Надеюсь, это поможет.

...