CSS или Javascript, которые могут изменять размер любого HTML, просматриваемого на iphone

Я пытаюсь придумать какой-нибудь CSS или Javascript, который может авторизовать любой HTML, просматриваемый в браузере iPhone (компонент UIWebview) таким образом, чтобы содержимое соответствовало области просмотра, а также изображения/текст все размеры. (не то же самое, что добиться уменьшения).

Основная идея, которую я получил от другого вопроса, - это настроить ширину эльмсов, например:

@media screen and (max-width: 480px){
    *{
    max-width: 320px;
    }
}

У меня также есть обычный метатег viewport:

<meta name="viewport" content ="width=device-width">

Это не изменяет его размер так, как это выглядит как в настоящее время. Вот оригинальный HTML.

Мне было интересно, что еще я могу сделать для достижения этой цели? Я не хочу, чтобы это правильно для этого HTML, но и других страниц HTML.

Возможно, для этого существует плагин jQuery?

Я не хочу получать это право только для этой страницы, я хочу нечто более общее для любой HTML-страницы.

Ответы

Ответ 1

Сетка будет предлагать большую гибкость. Большинство масштабных изображений и текста (если это не так), и преобразуются в плавные, мобильные макеты.

Я предпочитаю сетку CSS 1140 http://cssgrid.net/

Существует также:

Ответ 2

Вы можете связать разные таблицы стилей с различными носителями:

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css"> 
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">

Таким образом, вы можете создавать разные правила CSS для всех видов размеров экрана и т.д. Это дает вам большую гибкость.

Источник

Ответ 3

Я полагаю, что вы не можете использовать max-width для html- или body-element. Он работает с:

@media screen and (max-width: 480px){
    #wrap {
    max-width: 320px;
    }
}

(требуется дальнейшее изменение в #logo)

Ответ 5

Используйте следующий метатег в верхней части тега head на странице html:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width; initial-scale=0.83; maximum-scale=0.83; minimum-scale=0.83; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Вы можете изменить initial-scale и maximum-scale в соответствии с вашим требованием, чтобы соответствовать содержимому.

Ответ 6

@media only screen and (max-width: 999px) {
  /* rules that only apply for canvases narrower than 1000px */
}

@media only screen and (device-width: 768px) and (orientation: landscape) {
  /* rules for iPad in landscape orientation */
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* iPhone, Android rules here */
}

Они могут выглядеть проприетарными, но факт - это медиа-запросы CSS3, реализованные в Firefox, Safari (включая Mobile) и Google Chrome.

После этого создайте три разных макета. 1. Ширина до 480 пикселей (iPhone, Android): плотный интервал, один столбец; 2. до 980px (iPad в портрете): жидкостные колонны только на верхней части, одноколоночные в другом месте; 3.Where, чем 980px: исправлено, двухколоночное расположение по центру.

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

Кроме того, если вы настроите таргетинг на платформу iOS, убедитесь, что ваш макет автоматически заполняет отображение iDevice. В мобильных веб-китах вы можете использовать это:

<meta name="viewport" content="initial-scale=1.0">

Это связано с тем, что мобильное сафари отображает увеличенную версию страницы шириной 980 пикселей, даже если сама компоновка уже. Здесь вы можете прочитать больше этих характеристик: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Вы должны знать, что запрос на ориентацию носителя, хотя и поддерживается на iPad, не работает на iPhone. К счастью, запросы размера, такие как ширина и ширина устройства, так что возможность компоновки возможна без JavaScript с некоторой комбинацией из них.

Кроме того, с появлением устройств отображения Retina вам может понадобиться настроить таргетинг на них, чтобы обслуживать графики с высоким разрешением. Вы можете проверить это для деталей: http://webkit.org/blog/55/high-dpi-web-sites/

наконец, для устройств Retina вы можете использовать это:

<link rel="stylesheet" media="only screen and -webkit-min-device-pixel-ratio: 2" href="highres.css">

Ответ 7

Для начала это хорошая ссылка для запросов к мультимедиа для стандартных устройств http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Работает ли для вас следующий стиль?

/* Smartphones (portrait) ---------------- */
@media only screen and (max-width : 320px) {
     /* Styles */
     * {
        max-width: 320px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
     }
}

При использовании максимальной ширины 320 пикселей будет учитываться прокладка. Таким образом, он не будет добавлять никаких дополнений к 320px (как это было бы по умолчанию).

Дайте ему удачи.

Ответ 8

Установите свою обертку или тело-элемент в width: 100%; overflow:hidden;. Все подэлементы получают a max-width: 100%. Теперь конвертируйте все пиксели в проценты по отношению к своим родителям с помощью этого инструмента: http://rwdcalc.com/ это очень помогло мне!