Как настроить HTML для мобильных устройств с заголовком-изображением, которое занимает всю ширину браузера? - PullRequest
4 голосов
/ 04 октября 2010

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

Проблема теперь в том, что разные смартфоны имеют разное разрешение экрана.

Есть, например, 840x560, 480x320 или 800x480.

Что мне нужно написать в виде мета-тегов, CSS и т. Д., Чтобы изображение в каждом современном смартфоне соответствовало дисплею?

Надеюсь, моя проблема была четко описана.

Спасибо, Крис

Ответы [ 4 ]

7 голосов
/ 04 октября 2010

Поскольку width: 100%;, кажется, хорошо поддерживается, я бы предложил:

#header {
    width: 100%;
    padding: 0;
    margin: 0;
}
#header img {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
}


<div id="header">
    <img src="header.png" />
</div>

или

#header img {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
}

<img src="header.png" />

настройка просто width означает, что соотношение ширины и высоты изображения будет сохраняться браузером.Имейте в виду, однако, что передача манипуляции с изображениями (масштабирование / изменение размера) браузеру телефона может привести к появлению менее чем приятных артефактов.

Если у вас есть возможность использовать изображения разных размеров,Вы можете вызвать тех, кто использует @ media query :

<link rel="stylesheet" href="mobileStylesheet1.css" media="only screen and (max-device width:840px)"/>
<link rel="stylesheet" href="mobileStylesheet2.css" media="only screen and (max-device width:800px)"/>
<link rel="stylesheet" href="mobileStylesheet3.css" media="only screen and (max-device width:480px)"/>

И в этих таблицах стилей определите:

mobileStylesheet1.css

#header {
background: transparent url(path/to/840pxImage.png) 0 50% no-repeat;
}

mobileStylesheet2.css

#header {
background: transparent url(path/to/800pxImage.png) 0 50% no-repeat;
}

mobileStylesheet3.css

#header {
background: transparent url(path/to/480pxImage.png) 0 50% no-repeat;
}
4 голосов
/ 04 октября 2010

В дополнение к ответу Дэвида Томаса вам, вероятно, потребуется установить метатег viewport:

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

Имейте в виду, что для данного метатега есть дополнительные свойства, но этивероятно, те, которые вам нужны.

Вы также можете указать ширину как значение в пикселях.«device-width» по существу устанавливает ширину окна просмотра браузера равной ширине телефона, что, вероятно, то, что вы хотите.Впоследствии, простая 100% ширина любого элемента должна точно соответствовать его размеру телефона.Вы можете объединить это с ответом @media на запрос Дэвида Томаса, чтобы на самом деле поменять изображения, которые более точно соответствуют телефону, поэтому не требуется большого масштабирования.Большинство «современных» мобильных браузеров поддерживают метатег viewport.(Это действительно зависит от вашего определения современного смартфона.)

См. Также: ширина = ширина устройства не работает в Mobile IE

2 голосов
/ 04 октября 2010

Я думаю, что лучшим решением было бы иметь изображение + цвет фона заголовка (или рисунок).

Например:

<div class="header">
  <img src="image.png">
</div>

Ширина / высота image.pngКласс fixed и header имеет что-то вроде:

.header {
  display:block;
  background-color:#;
  background:url("") repeat;
}

Тогда он должен подходить для всех устройств.Но если вы хотите что-то лучше, может быть, вам стоит сделать модель MVC и иметь представление для каждого устройства (или большинства импортеров ^^)

Удачи!

0 голосов
/ 04 октября 2010

Идентифицируйте телефон из строки агента и обслуживайте различные изображения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...