2013-03-15 173 views
0

我看了看,并且找不到解决方案。也许我的独特性更强。我现在的问题是我的背景在移动Safari浏览器上被切断。这里是它的外观像一个截图:移动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> 

任何帮助,将不胜感激!

+0

你说,你做了一些研究 - 但你不提供任何源代码,CSS规则或任何东西。我们无法为您修复您的网站,请将您的问题缩小为最小的形式。 – 2013-03-15 22:00:45

+0

对不起,我不想要求任何人为我修理我的页面。我只是要求帮助我找出可能导致此问题的原因。我用我的一些源代码更新了我的问题。它切断了我的背景,切断了导航菜单等。 – 2013-03-15 22:07:29

+0

尝试并设置身体的最小宽度为1058px – npage 2013-03-15 22:55:23

回答

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的浏览器的宽度,并使其滚动

+0

(即使在计算机上),则可以看到该问题。谢谢!主要是将最小宽度加到工作的身体上。尽管在标题中使用视口仍然很理想。感谢您花时间帮助! – 2013-03-18 13:28:20