2012-01-26 9 views
1

私はcss3 & html5を使ってiPhone 3用に設計されたウェブアプリを持っています。 「cssピクセル」と「物理ピクセル」について読んだ後でさえ、iPhone 4と網膜ディスプレイへの移行は少し難題でした。網膜の表示とスケーリングの問題

私のWebアプリケーションは、画面の右側から「隠された」かなりのページを作成し、「ホーム画面」のボタンは、画面上に目的のページをスライドさせます。

-webkit-transform: translate3d(+100%,0,0) 

すべてがiPhone 3でうまく動作しますが、網膜ディスプレイは2倍の幅であるため、iPhone 4のディスプレイ側の両方のページ側は、私は推測:私はオフスクリーンページを非表示に変換、次を使用します。

私はその問題を解決することができたけどから私のメタタグを変更しました:

<meta name="viewport" content="width=device-width,user-scalable=no"> 

へ:

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"> 

とオフスクリーンページ非表示にする表示属性を使用して:

display: none 

でも、まだ解決できない問題が1つあります。 iPhone 3では、デバイスを横向きに回転させるとテキストのサイズが大きくなります。 iPhone 4では、より広い画面が使用されますが、テキストのスケーリングは発生しません。

任意の提案をいただければ幸いです、

ティア

答えて

1

あなたは-webkit-text-size-adjust CSSプロパティを通じてこの動作を無効にすることができます

html { 
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */ 
} 

このプロパティの使用はSafari Web Content Guideにさらに記載されています。

関連する問題