Как правильно адаптировать сайт под мобильные устройства?

Question

[Jacksnow]

Здравствуйте, сделал адаптацию сайта под мобильные, используя бутстрап колонки xs. Сделал, чтоб картинки старые скрывались, а появлялись новые шириной 350px используя hidden . Зашел с телефона, а там выглядит это так: белый экран, а сбоку мой сайт, и приходится увеличивать. Почему так? Ведь когда смотрю через мозилу, эмитацию мобильного браузера все ок. Причем когда открываю, то сайт находится не в xs колонках а в sm, хотя у телефона дисплей не большой.
добавил

<meta name=viewport content="width=device-width, height=device-height, initial-scale=1">

стало более увеличено, но теперь с правого бока кусок пустоты.

и когда заходишь с мобилы пишет please fill in width & height for all your images

Answer 1

[Владимир]

На своременніх телефонах соотношение физический пиксель - css пиксель - 3/1 Поэтому картинки должны быть как для fullhd
+ www.w3schools.com/css/css_rwd_viewport.asp
+ mydevice.io
+ screensiz.es

Для того, чтобы сайт нормально работал на ретина дисплеях для всех картинок нужно явно указывать ширину и высоту в css еще можно использовать конструкцию
width: в пикселях
heigth: auto
Если картинки не фиксированного формата

Comments

[Jacksnow]

а как угодать сколько там пикселей, я указал 350px у новой картинки

[Владимир]

Jacksnow: Угодать не реально, нужно знать

[Jacksnow]

Владимир: но у каждого телефона в мире же не будешь узнавать?)

[Владимир]

Jacksnow: Размер картинки можно указівать в процентах или в vw. Чаще всего предпочтительно в процентах, но иногда полезно и vw и vh