Как сделать так, чтобы современные мобильные браузеры не изменяли автоматически размер нашей страницы
Браузеры для операционных систем Android и iOS основаны на WebKit (http:// www.webkit.org/). Эти браузеры, а также большинство прочих (к которым, например, относится Opera Mobile) позволяют использовать специальный тег <meta>
С атрибутом name="viewport" для отмены применяемого по умолчанию трюка со сжиманием холста. Тег <meta> нужно просто добавить в теги <head> в HTML-коде. В нем допускается задать определенное значение для width (которое, например, можно указать в пикселах) либо для initial-scale, например 2.0 (удвоение фактического размера). Вот вариант тега <meta> с атрибутом name="viewport", где заданы значения, согласно которым содержимое в окне браузера будет в два раза больше (200 %) по сравнению с фактическим размером:
<meta name="viewport" content="initial-scale=2.0,width=device-width" />
Добавим его в наш HTML-код, как это сделано в приведенном далее фрагменте:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=2.0,width=device-width" />
<title>And the winner isn’t…</title>
Теперь загрузим нашу страницу в браузере Android и посмотрим, как она будет выглядеть (рисунок 2.8).
Обновленная страница, открытая в браузере Android
Как видите, это не совсем то, к чему мы стремимся, однако это хороший наглядный пример работы приведенного кода!
Добавить комментарий