Доброго времени суток, есть 2 монитора, один с диагональю 23 и разрешением 1920x1080, на нем я и делаю сайт, и отталкиваюсь от него, создавая адаптивность для разрешений поменьше, используя стандартное средство браузеров для проверки адаптивности, к примеру когда я проверяю разрешение 1366x768 и создаю для этого разрешения стили, то все нормально, однако стоит открыть сайт на ноутбуке с разрешением 1366x768 дизайн немного отличается от того, что показывает инструмент браузера для того же разрешения, к примеру, если в инструменте для 1366 все ровно, то на ноуте с тем же разрешением немного все плывет вниз, как с этим быть ? И второй момент, есть маленький ноут с диагональю 15 и разрешением 1920x1080, и так все стили по умолчанию, которые и делались под это разрешение - плывут, но на мониторе с тем же разрешением все нормально, как сделать стили для одного разрешения но разного размера устройств ?
2 ответа
Сложно будет добиться "идентичности" на разных устройствах. Начните с добавления <meta name="viewport" content="width=device-width, initial-scale=1">
(в head)своего сайта. Опять же если не вникать в проблемы кроссбраузерности.
Можно попробовать отказаться от размеров в px а перейти на em/rem или же вообще на vw/vh
Если я правильно понимаю вопрос то в стилях нужно использовать относительные размеры в em/rem. Хотя лично у меня возникали при этом проблемы связанные с плотностью пикселей на разных устройствах (dpi) - на мониторе одно, на реальном устройстве все уезжает.