web-dev-qa-db-ja.com

iPadのSafariでバックグラウンドスケーリングを修正する方法は？

Divコンテナ（100％x 100％）で巨大な背景画像（2000x1500）を使用するWebサイトがあります。

IPadのSafariでそのサイトを開くと、コンテンツ（〜80％）とは異なる割合で縮小（〜40％）されます。

背景を、幅100％、高さ100％のdivのimgタグに移動し、オーバーフロー設定を「非表示」にしました。まったく同じことが起こります。

Safariがコンテンツと同じ割合で背景画像を縮小するのに役立つCSS設定はありますか？

cssipadsafaribackground
25
favo

IPad用に別のスタイルシートを必ず作成する必要があります。これを行うには、次を使用できます。

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

このリンクには、iPadでのWebサイトの向きとその対処方法に関する情報があります。

私のアドバイスは、iPadバージョンのサイト用に別のスタイルシート（cssファイル）を作成するには、何をするにしても、それを作成し、上記のようなリンクタグを追加するだけです。

IPadバージョンで2000x1500pxの画像の背景がある場合、それが問題を抱えている唯一のものであれば、iPadに合うように縮小できます。画像のサイズを1024pxに減らして、iPad用の別のスタイルシートで宣言すると、最終結果が表示されます。

それがどうなるか教えてください。

ところで、この記事も読む必要があります。 http://www.inspiredm.com/2010/02/09/ipad-design/

19
UXdesigner

背景キャンバスに背景画像があるときにこれを追加するとうまくいきました...

body{ -webkit-background-size: 2000px 1400px;}

明らかに、寸法を画像の正しいサイズに置き換える必要があります。

31
Noel Saw

この問題は、<body>タグに添付された背景画像がある場合にのみiPadで発生するようです。背景画像を含むdivに配置すると、問題を解決できます。これは、背景画像を「修正」する必要がない場合、背景を修正するための手法として= IE画像に<body>タグを使用することを義務付けています。

これらの2つのサイトの違いを見ることができます。1つ目は（背景画像の固定位置のため）<body>タグを使用して配置し、2つ目はdivを使用しています：

http://www.mricsi.comhttp://www.collinshirsch.com

お役に立てば幸いです！

編集-これは完全に正確ではありません-これは一部の場合にしか当てはまらないようで、その理由は不明です。

2
sticky IT

Divに（スクロール）背景画像として5400x556があります。 .jpgとしては大幅に縮小され、.pngとしては問題ありません。唯一の問題は、.pngが5メガバイトであるということです。 Grr。

ただし、個別のスタイルシートを使用してください。

幸運を

オーウェン

1
Owen Denham

@UXdesignerのソリューションを使用して、iPad用の独立したスタイルシートを作成できます。ただし、現在のスタイルシートで単一のステートメントを使用できます。

@media only screen and (max-device-width: 1024px){
  .yourClassname{
    max-width: 500px;
  }
}

そしてもちろん、携帯電話のような小さなデバイスでは次を使用できます：

@media only screen and (max-device-width: 480px){
  .yourClassname{
    max-width: 100px;
  }
}

これらの提案はCSS3でのみ機能することに注意してください（最新のデバイスはすべてこれを受け入れます）

0
arnoudhgz

私が使う：

 body {min-width:2000px; min-height:1500px }
0
Tadeu Luis