0

CSS単位としてemsとパーセンテージのみを使用して簡単に作成しました。これは、いくつかの要素をラップするコンテナー div であり、次のコードを含むページの中央にあります。

position: absolute;
top: 50%;
left: 50%;
margin-top: -25.875em;
margin-left: -38.187em;
padding: 0;
width: 76.375em;
height: 47.75em;

iPhone と iPad を除くすべてのブラウザで問題なく動作します。ページの右上隅のみをレンダリングします。

追加した ：

<meta name="viewport" content="maximum-scale=2, minimum-scale=.2, initial-scale=.6">

また、iPadでは縮小されましたが、iPhoneにはまだ大きすぎ、ポートレートモードではページがまったく拡大されませんでした.

最後に、グーグルでメタタグをいじってみると、私が思いついた最善の解決策は、メタタグを次のように減らすことでした。

<meta name="viewport" content="user-scalable=yes" >

これと組み合わせて：

@media all and ( max-device-width: 780px ) {
  body {
    text-align: center;
  }
  .page-content {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    margin-top: 4%;
    margin-left: 100px;
    margin-right: 120px;
    margin-bottom: 4%;
    text-align: left;
  }
}

ページは依然として非常に大きな縮尺でレンダリングされますが、少なくとも縮小できます。

モバイルサファリはページを自動的に縮小するはずではありませんか? ここで相対単位が私を台無しにしていますか?

どんな助けでも大歓迎です、ありがとう!

4

1 に答える 1

2

代わりにこれを使用してください：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

于 2013-01-05T19:26:34.607 に答える