Сначала создайте свой мобильный сайт, выходите с дисплеем сетчатки

Сначала я пытаюсь создать свой сайт с мобильным телефоном, поскольку я планирую использовать гибкую/отзывчивую компоновку, чтобы затем создать более крупные настольные компьютеры.Сначала создайте свой мобильный сайт, выходите с дисплеем сетчатки

Я уверен, что это легкое исправление, но я начал строить свой основной заголовок с iPhone 5, поэтому он имеет ширину около 300 пикселей. Все остальное будет падать в линию под этим в настройке с одним столбцом.

Нужно ли начинать с медиа-запроса, чтобы ширина была правильно установлена на экране сетчатки? Потому что прямо сейчас мой заголовок хорошо выглядит на моем рабочем столе (300 пикселей в ширину), но он не заполняет мой экран iPhone. Я знаю о необходимости сохранения двух наборов изображений для этой цели, но я не могу даже получить простой заголовок, чтобы соответствовать.

благодарит за любые советы.

Вот мой (упрощенный) код:

<html> 
<head> 
</head> 
<body> 
    <div id="centered-wrapper"> 
     <header> 
      <div id="header-logo"> 
       <a href="#"> 
        <img src="image source here" alt="alt text" title="title text"/> 
       </a> 
      </div> 
     </header> 
    </div> 
</body> 
</html> 

html { 
    margin: 0; 
    padding: 0; 
    } 

body { 
    font-size: 100%; 
    margin: 0 auto; 
    } 

#centered-wrapper { 
    position: relative; 
    width: 18.75em; 
    height: 46.875em; 
    margin: 0 auto; 
    } 

header { 
    position: relative; 
    width: 18.75em; 
    height: 18.75em; 
    margin: 0 auto; 
    } 

#header-logo { 
    position: relative; 
    float: left; 
    width: 18.75em; 
    height: 12.25em; 
    margin: 0; 
    padding: .625em 0 0 0; 
    } 

img { 
    max-width: 18.75em; 
    height: auto; 
    }

источник

2013-05-07 tdo-design

айфонов обычно масштабироваться вниз страницы так фита на экране. Для того, чтобы остановить это поведение на айфонов и большинство других смартфонов, вы хотите включить следующее в голове вашей страницы:

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

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

Удачи вам!

источник

2013-05-08 00:37:39

спасибо Дэвиду, работал как шарм ... по крайней мере на моем iPhone. cheers –

Это здорово, повеселиться! –

Сначала создайте свой мобильный сайт, выходите с дисплеем сетчатки

ответ

Смежные вопросы