Вопросы Теги

Правое поле рендеринга в браузере iPhone / iPad / webkit

У меня есть фрагмент html ниже, который отлично отображается во всех браузерах. Однако в webkit на iphone и ipad, когда я зажимаю страницу (чтобы она меньше), я вижу черную границу, которая является цветом фона тела, просвечивающим только на правом краю. Это происходит только тогда, когда я указываю ширину div .headerpic. Так как это единственное место в документе, где я указываю ширину, мне было интересно, почему он не может полностью отрисовать правый край (поскольку это теоретически самая широкая часть документа?).

Я прикрепил фотографию того, как это выглядит с моего ipad. 

<!doctype html>
<html>

   <head>

    <style>
      body {background-color:#000;color:#231f20;margin:0;}
      #wrapper {background-color:#fff;min-height:1000px;}
      #header .headerpic {height:102px;padding-top:80px;margin:0 auto;width:986px;}
      #footer {color:#fff;}
    </style>
  </head>

  <body>

    <div id="wrapper">
      <div id="header">
        <div class="headerpic">
        </div>
      </div>
    </div>

    <div id="footer">
    </div>

  </body>
</html>

Photo Of problem

6
задан robzolkos 1 March 2011 в 13:50
поделиться