Настольный эквивалент iOS Safari, масштабирующий страницу до ширины видового экрана?

Question

есть CSS-трюк, который может имитировать то, как iOS Safari масштабирует все содержимое страницы до ширины окна просмотра в браузере рабочего стола? Это для прототипа, поэтому он не должен быть «правильным» способом делать что-то и может просто работать в одном браузере (предпочтительно Chrome или Safari).

В принципе, я хочу закодировать что-то на одном уровне (по крайней мере, 1920px x 1080px), а затем масштабировать масштаб до ширины браузера, если он меньше или больше, без необходимости указывать все мои измерения в процентах. Есть ли что-то, что я могу сделать с 3D-преобразованиями или настройкой всей страницы на холст (я не знаю достаточно, чтобы знать, является ли это глупым вопросом или нет)?

Answer 1

Если я правильно понимаю ваш вопрос, это может быть то, что вы ищете:

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

Этот тег заставит браузер, чтобы дать страница ту же ширину, как размер экрана/окна просмотра. Важно отметить, что это работает только для страниц, которые построены в ответном порядке. Если вы используете фиксированные пиксельные значения для всего (похоже, это может быть так?), Это, вероятно, не будет работать очень хорошо.

Другого варианта: вы могли бы размер все, используя относительные единицы (вместо процентов), такие как em или rem, а затем уменьшаете общий font-size при определенной ширине окна просмотра. Подобно:

html { 
    font-size: 65%; 
} 

@media screen and (min-width: 800px) { 
    html { 
    font-size: 100%; 
    } 
} 

.my-element { 
    width: 2rem; 
} 

В этом случае my-element будет иметь различную ширину на разных размерах окна просмотра.