電子メール ニュースレターを表示する iPad アプリケーションがあります。この HTML コンテンツは取得され、WebView 内に埋め込まれます。ほとんどのニュースレターの幅は 650 ピクセルですが、900 ピクセル程度のものもあります。
デフォルトでは、表示が小さすぎる (iPad デバイスの幅は 768px) ため、ページを埋めるようにズームしたいと考えています (幅のみに関心があります - 垂直スクロールは問題ありません)。
viewport メタ タグを使用して、デバイスの幅として 650px をハードコーディングすると、幅 900px のニュースレターが切り取られます。また、明示的な幅を設定すると、ビューポートのサイズ変更が無効になります。
<meta name="viewport" content="width=650, initial-scale=1">
ただし、可変デバイス幅に設定すると、キャンペーンは画面によって「圧迫」され、中心からずれて表示されます。
<meta name="viewport" content="width=device-width, initial-scale=1">
幅を動的に指定して、キャンペーンが <= 650 の場合は 650 に設定し、それ以外の場合は 900 に設定する方法はありますか? 要するに、ニュースレターの幅に基づいて固定ビューポートを動的に設定しようとしています。代わりに @viewport CSS ルールを使用できますか?