Мобильная разработка и ширина - PullRequest
0 голосов
/ 15 августа 2011

Поэтому я пытаюсь разработать простой мобильный веб-сайт. Он перейдет с QR-кода на страницу, ссылку на которую приведена ниже. Проблема в том, что когда я смотрю на свой телефон Android или Apple Phone, он добавляет огромную ширину. Любые предложения будут великолепны. Вот ссылка на живую версию: http://www.trileafweb.com/promotion/index.html

Вот HTML / CSS

Promotion

    <style>
        html,body
        {
            width: 400px;
            height: 200px;
        }
        h1{color:#00a94f;
            text-align:center;}
        p{
            font-weight:bold;
            font-size: 14;
            text-align:center;
            font-family:Arial;}
        img{
            position:relative;
            height:100px;
            width:200px;
            padding-left:100px;}
        #coupon{
            padding-top:15px;
            position:relative;
            border: 3px dashed;
            width: 400px;
            height:200px;
            border-radius:5px;}
    </style>
</head>

<body>
    <div id="coupon">
        <h1>Promotion</h1>
        <p>Promotion Texts</p>
        <p>Coupon Code: <span style="color:red; font-size:24;">xxx-xxx</span></p>
    </div>
</body>

1 Ответ

3 голосов
/ 15 августа 2011

Включаете ли вы метатег, сообщающий мобильным браузерам, что вы понимаете, как работают их окна просмотра?Примерно так:

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

Дополнительная информация о том, почему это необходимо:

Если вы думаете об этом логически, кажется, имеет смысл: мобильныйSafari взглянул на страницу и предположил, что это документ, предназначенный для настольных компьютеров, что справедливо для подавляющего большинства веб-сайтов.Таким образом, он дал сайту ширину 980 пикселей и представил его уменьшенным.Вот почему мы ничего не можем прочитать, пока не увеличим масштаб страницы ...

Но это не хорошо!Нам нужно сообщить браузеру, что эта веб-страница оптимизирована для мобильных устройств.И именно здесь на снимке появляется метатег видового экрана.

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