Как установить начальный масштаб, чтобы сайт хорошо отображался в браузерах всех устройств

Question

Мне очень трудно понять, как установить начальный масштаб, чтобы веб-сайт выглядел хорошо во всех браузерах, операционных системах и устройствах. На моем сайте есть файл main.css, а затем добавляются дополнительные файлы, такие как mobile.css и tablet.css, в зависимости от того, какое у вас устройство.

У меня есть хэш-таблица пар ключ-значение, где ключ - это браузер + ОС + устройство, а значение - значение начального масштаба. Мой код контроллера будет определять, какой браузер + ОС вы используете, прежде чем назначить соответствующий начальный масштаб представлению. Это не очень хороший способ вывода начального масштаба.

Я хотел бы получить решение, которое является одним из следующих:

• укажите только одну постоянную начальную шкалу, которая в сочетании с другими постоянными атрибутами сделает сайт красивым

• простое уравнение для получения соответствующего начального масштаба на основе других атрибутов браузера, ОС и устройства

• способ сделать сайт единообразным для всех браузеров, ОС и устройств БЕЗ использования начального масштаба

Вот пример проблем, с которыми я сталкиваюсь: если я установлю начальный масштаб на 1, он будет хорошо отображаться в Galaxy Note 1+Stock browser+Android4.0.4, но он слишком велик в Galaxy Note 1+Chrome+Android 4.0.4, Другими словами, на том же телефоне и той же ОС, но в другом браузере, масштаб нарушен! На самом деле, это также выглядит безобразно на всех устройствах iOS. Он слишком велик на iphone4S с OS6 и немного велик на iPad 1 с OS 5.1.

Должен быть более простой способ контролировать масштаб сайтов на мобильных устройствах?

Answer 1

Попробуй это:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />

<link rel="stylesheet" href="/Styles/tablet.css" media="screen and (max-width:800px)" />

<link rel="stylesheet" href="/Styles/mobile.css" media="screen and (max-width:480px)" />