разные устройства с одинаковым пикселем, действуя по-разному - PullRequest
0 голосов
/ 11 октября 2019

Я сейчас работаю над шаблоном для веб-страницы и сейчас работаю над отзывчивостью для него. У меня есть версия для настольного компьютера и версия для мобильного телефона, которая работает нормально. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что я пытаюсь сделать версию для планшетов. «Планшет», которым я сейчас пользуюсь, - это Surface Pro с 96 dpi. Мой рабочий стол имеет и более старый монитор 1080. Поэтому, когда я открываю Chrome с помощью инструментов dev на поверхности, ширина пикселя остается той же или близкой к моему рабочему столу, но выглядит совершенно иначе. Текст, который находится в одной строке на рабочем столе, находится в двух строках на поверхности, и не все отображаются. Причина этого заключается в том, что это заголовок страницы. При полной ширине на поверхности он действует как полуширина на рабочем столе. Я думал, что это может быть потому, что экран для поверхности имеет более высокое DPI на поверхности, но не уверен. Это то, что вызывает это, и если да, то как это исправить. Установка медиазапроса, скажем, 800px для планшета работает, скажем, для настольного компьютера и некоторых планшетов, но, похоже, не работает для чего-то вроде поверхности. Так есть ли другой способ установить ширину? У меня есть код сайта, но я не думаю, что что-то из этого будет полезным. Если нужно, дайте мне знать.

1 Ответ

0 голосов
/ 11 октября 2019

Попробуйте использовать vh (высота области просмотра) для высоты и vw (ширина области просмотра) для ширины, она использует процент от окна. 100vh будет использовать 100% высоты окна, а 100vw будет использовать 100% ширины окна. Это лучше, чем использование пикселей и требует меньше усилий, чтобы сделать страницу отзывчивой, пиксели несовместимы и легко ломаются.

...