我看了又看，找不到解决方案。也许我的更独特一点。我现在的问题是我的背景在移动 Safari 浏览器上被截断了。这是它的外观截图:
这是我正在处理的页面的链接以及它的外观: 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>
如有任何帮助，我们将不胜感激!
最佳答案
好的，我已经确认修复: 在 header.php 文件中添加:
<meta name="viewport" content="width=1058px, minimum-scale=0.1, maximum-scale=2.0">
这将使移动浏览器将文档大小设置为 1058px。
然后为 theadamgroup.css 添加:
Body{
min-width:1058px;
}
如果浏览器宽度低于 1058px 并使其滚动，这将强制文档大于浏览器宽度
关于iphone - Mobile Safari 浏览器 - 视口(viewport)问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15442696/