0

私は見て、見て、解決策を見つけることができません。多分私のものはもう少しユニークです。現在の問題は、モバイルの Safari ブラウザで背景が途切れてしまうことです。これがどのように見えるかのスクリーンショットです：

ここに画像の説明を入力

そして、ここに私が取り組んでいる私のページへのリンクと、それがどのように見えるかを示します: http://www2.theadamgroup.com

body と 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>

どんな助けでも大歓迎です！

4

1 に答える 1

1

さて、修正を確認しました: header.php ファイルに以下を追加します:

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

これにより、モバイル ブラウザのドキュメント サイズが 1058px に設定されます。

次に、adamgroup.css に以下を追加します。

Body{
   min-width:1058px;
}

これにより、ブラウザーの幅が 1058px を下回り、スクロールする場合に、ドキュメントがブラウザーの幅よりも大きくなります。

于 2013-03-15T23:02:57.910 に答える