Как сделать сайт адаптивным для одинакового разрешения экрана, но разного размера?
Доброго времени суток, есть 2 монитора, один с диагональю 23 и разрешением 1920x1080, на нем я и делаю сайт, и отталкиваюсь от него, создавая адаптивность для разрешений поменьше, используя стандартное средство браузеров для проверки адаптивности, к примеру когда я проверяю разрешение 1366x768 и создаю для этого разрешения стили, то все нормально, однако стоит открыть сайт на ноутбуке с разрешением 1366x768 дизайн немного отличается от того, что показывает инструмент браузера для того же разрешения, к примеру, если в инструменте для 1366 все ровно, то на ноуте с тем же разрешением немного все плывет вниз, как с этим быть ? И второй момент, есть маленький ноут с диагональю 15 и разрешением 1920x1080, и так все стили по умолчанию, которые и делались под это разрешение - плывут, но на мониторе с тем же разрешением все нормально, как сделать стили для одного разрешения но разного размера устройств ?
1.1 У браузеров есть скролл, панельки отбирающие высоту, у старых еще и рамочки (или от ОС а не от версии браузера зависит, забыла ужу как выглядело).
1.2. У мониторов разное соотношение сторон
=> вертикальный скролл на одних появится раньше, чем на других и соответственно уменьшится ширина поля.
2. У браузеров есть масштаб. Проверяйте, часто бывает случайно и незаметно +/-10%
3. Есть настройка ОС. Часто на небольших ноутах с высоким разрешением стоит масштаб больше 100%. При этом, он работает не во всех браузерах/приложениях.
У меня в FF в адаптивном режиме был баг - селекторы отображались без заданных стилей т.ч. советую финальную проверку проводить все-таки сменой разрешения экрана.
вы отталкивайтесь не от разрешения экрана (1366), а от контента страницы.
если есть скролл, то ширина уже будет меньше.
делайте так, что нормально отображалось при любом разрешении, хоть 1327px, хоть 839px
Простой
Средний
