Question

我看了看，找不到解决方案。也许我的独特之处。我现在的问题是我在移动Safari浏览器上的背景被切断了。这是它的样子截图：

enter image description here

这是我正在处理的页面的链接以及它看起来如何： http://www2.theadamgroup.com

以下是我和html的源代码：

body {
    font-family:Helvetica, Arial, sans-serif;
    margin:0;
    background-image:url(img/paper-footerbg.png);
    background-attachment:scroll;
    background-repeat:repeat-x repeat-y;
}
body, html {
    -webkit-text-size-adjust: none;
}

以下是我的头版编码方式的片段：

<body>
<div style="width:100%; min-height:100%;">
<?php include("header.php"); ?>
<div id="mainBox">
  <div id="mainContent">
    <div style="float:left; width:439px; padding:35px 0 0 0;">
      <p style="font-size:34px; line-height:40px; font-weight:bold; color:#009b3a; margin:0;">High-quality printing from your neighbors in Franklin</p>
      <p style="font-size:16px; line-height:22px; margin-top:7px;">The ADAM Group is a full-service printing and design company in Franklin, Tenn. Our specialty is helping businesses develop and print high-quality brochures, catalogs, calendars, books, flyers, stationery, menus, business cards and so much more.</p>
      <p style="font-size:16px; line-height:22px;">We pride ourselves on the professional, fast service we provide in our community. Franklin is our home, and helping our neighbors succeed is our business.</p>
      <p style="margin:42px 0 0 0;" align="center"><a href="#" class="learnmoreBtn"></a></p>
    </div>
    <div style="float:left; width:512px; margin:0 0 0 47px;"><img src="img/tag-products.png" width="512" height="401" /></div>
  </div>
</div>

任何帮助将不胜感激！

Answer 1

好的，我已确认修复：在header.php文件中添加：

<meta name="viewport" content="width=1058px, minimum-scale=0.1, maximum-scale=2.0">

这将使移动浏览器将文档大小设置为1058px。

然后为theadamgroup.css添加：

Body{
   min-width:1058px;
}

如果浏览器宽度低于1058px并使其滚动，这将强制文档大于浏览器宽度

移动Safari浏览器 - 视口问题

1 个答案: