問題タブ [initial-scale]

初期スケールのメタ属性を発見しました。

以前は、default.css を使用してすべてのスタイルとサイズ (フォントと要素) を定義していたので、デスクトップ コンピューターの画面領域に適切に表示されます。次に、電話またはタブレットを使用している場合は、メディアクエリまたは PHP を使用して phone.css または tablet.css を含めることができます。これにより、小さいデバイスのサイズのみが調整されます。

しかし、初期スケールの概念を認識したので、要素のサイズを制御する代わりにそれを使用する必要がありますか?

私が得ようとしている非常に重要な結果はこれです...私はフォントサイズを次のようにEM（またはREM）単位で定義するために使用します：

つまり、私の phone.css と tablet.css は、html 要素のフォント サイズのパーセンテージのみを調整し、他のすべての要素はすべての異なるデバイスに応じてスケーリングされます。ある程度、パディング、マージン、行の高さ、文字間隔でこれを行います。

初期スケールの導入により、フォント サイズのスケーリングに EM/REM 単位は関係ないということですか? もっと直感的な PX ユニットに固執できますか? そして、残りのスケーリング作業は initial-scale に任せますか?

ご覧いただきありがとうございます。メタ タグから初期スケール アウトと最大スケール アウトを削除すると、次のようになります。

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

タグ、iOS 6 Safari で表示されるサイトが大きすぎます。あまりにも正しくフィットするようにするには、初期値と最大値を取得する必要があります。ビューポート タグをこのように残すことは許容されますか? 他のモバイル デバイスではテストしていません。

どうもありがとう。

iPhone 4 などのディスプレイのデザイン コンセプトに 1px の境界線が含まれているという問題に出くわしましたが、Retina デバイスがアスペクト比 2x の CSS を測定していることを知りませんでした。

そこで、max-device-width:640px(ポートレート用の) メディア クエリを利用してページのデザインを開始し、ビューポート メタinitial-scale=.5を

問題は、iPhone の実ピクセル寸法でメディア クエリを設定および定義したくない場合initial-scale=.5、Retina ディスプレイで 1 ピクセル幅の境界線などを実現する方法がないように思われることです。border:.5pxそれの整数値 - 1 ではなく 0 になるようです。

さまざまなデバイスで、最初にロードしたときにサイトの幅が画面の幅に収まるように「初期スケール」を設定する方法について疑問に思っています。

私のウェブサイト

http://bam.net16.net/BAM/

通常のブラウザーでは問題なく動作しますが、モバイル デバイスのブラウザーではテキスト インフレーション + iframe が半分空白になるという奇妙な動作がありました。ビューポートのメタ タグが役に立ちます。これで問題なく動作しています。

Atm 初期縮尺が大きく、サイトが拡大されて開始される場合、画面外にあるサイト内の iframe の部分は、縮小しても描画されません。小さな初期スケールで設定してズームアウトを開始すると、ズームインでき、すべて正常に動作します。

iPad の第 4 世代で Web サイトをテストしており、そのピクセル サイズは 2048px x 1536px ですが、768px 以下の「モバイル」メディア クエリ (縦表示) をアクティブにし、「タブレット」メディア クエリ ( 769px と 1024px です。

なぜこれを行うのか興味がありますか？

私は頭の中でこのメタタグを使用しています。これがこれを行っている理由だと確信しています。

文句を言っているわけではありません。これが適切な方法だと思います。なぜそれが機能するのか混乱していますか？1536pxを768pxにする魔法とは？

モバイル サファリ (たとえば) では、ユーザーがフル サイトにいてからモバイルに切り替えた場合、ビューポートの以前の縮尺が維持されます。

ブラウザーに記憶されたスケールを一度だけ忘れさせるにはどうすればよいですか?

Javascript ソリューションが最適ですが、他のアイデアも受け入れられます。

追加した：

Android向けのこのより良いフレーズの質問を見つけました：

**ページ全体を更新せずにビューポートのスケーリングをリセットするには? **

しかし、ios でも同じ問題が発生しています。ハード リフレッシュ ページ スケールがリセットされることはありません。