Отрегулируйте размер экрана на основе браузера пользователя

Question

Есть ли способ настроить размер экрана пользователя после посещения моего веб-сайта? В принципе, если я уменьшаю масштаб с моей веб-страницы, мои контейнеры и ящик не выравниваются.

Так мне было интересно, есть ли способ иметь как CSS или яваскрипт функцию туда, где я хотел бы сделать что-то вроде:

if screen size is x, 
then adjust screen size to x 

Answer 1

Использования HTML5, вы можете использовать @media в вашем CSS для этой цели , Например,

@media screen and (max-width: 480px) 
{ 
    div#wrapper 
    { 
     width: 400px; 
    } 
} 
@media screen and (max-width: 1024px) and (min-width: 481px) 
{ 
    div#wrapper 
    { 
     width: 800px; 
    } 
} 
@media screen and (min-width: 1025px) 
{ 
    div#wrapper 
    { 
     width: 1080px; 
    } 
} 

Другим способ добиться того же результата, чтобы иметь отдельную таблицу стилей CSS для каждого, то вы можете использовать этот код, как это поменять CSS в зависимости от размера экрана.

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> 
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" /> 
<link rel="stylesheet" media="print" href="print.css" /> 

Answer 2

У вас есть два варианта. Один из них - вы можете сделать то, что предложил другой ответ. Или вы можете пойти с javascript. Вероятно, Javascript более надежный. Вы можете легко добавить событие изменения размера окна и вызвать функцию для настройки ваших элементов. Javascript имеет внутреннюю и внутреннюю ширину, чтобы найти общую высоту или ширину вашей страницы в пикселях. Тогда просто используйте оператор if. Я сейчас на телефоне, но позже буду писать код. Я улучшу этот ответ, если вам это не понравится. Что также может помочь, если вы используете проценты в своем css.