14

質問

メタ ビューポート タグに関するスタック オーバーフローに関する質問がたくさんあることは知っていますが、最も明白で有用な質問と思われるものを尋ねている人を見つけることができません。

メタ ビューポートと CSS メディア クエリを使用して、平均 960 ピクセルの Web サイト デザインを iPad (およびデスクトップ) で見栄えよくしながら、iPhone やその他の携帯電話用の小さなビューポートとサイト デザイン (320 ピクセルなど) を維持するにはどうすればよいですか?

iPhone の場合は言うまでもなく、小さくて携帯電話に適したサイト (幅 320 ピクセルなど) が理想的です。しかし、iPad のより大きな画面の場合、特別なモバイル サイトは実際には必要ありません。通常の 960px のサイト デザインを使用するのが適切と思われます。320 ピクセルのサイトは iPad ではおどけたように見えます。

ここに問題があります: メタ ビューポート タグと CSS メディア クエリを使用して、1) iPad の通常のサイトと 2) iPhone のモバイル サイトの両方を実現する方法がわかりません。JavaScript のハック (デバイスに応じてメタ ビューポート タグを動的に変更するなど) で可能であることは認識していますが、JavaScript は使用したくありません。静的コンテンツを含む単純な Web サイトで基本的なユーザビリティを実現するために JS が必要になるとは思いません。

1) メタ ビューポート タグを完全に削除すると、通常の 960 ピクセルのサイトはiPad では完璧に見えますが、iPhone では良くありません (右側の余白が大きくなります)。

メタ ビューポート タグのない Web サイトの例

2) 一方、 を使用する<meta name="viewport" content="width=device-width" />と、サイトは iPhone では見栄えがよくなりますが、iPad では見栄えが悪くなります (768px にズームすると、サイトがビューポートからはみ出します)。

メタ ビューポート タグを使用した Web サイトの例

これは世界で最も単純なことのように思えますが、解決できませんでした。私は何が欠けていますか？

マークアップ/CSS

CSS:

<style type="text/css">
body { margin: 0; }
.mobile { width: 320px; background: #fdd; display: none; }
.desktop { width: 960px; background: #ddf; }
</style>

<style type="text/css" media="screen and (max-device-width: 480px)">
.mobile { display: block; }
.desktop { display: none; }
</style>

マークアップ:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="mobile">Phone (320px)</div>
<div class="desktop">Desktop and tablet (960px)</div>
</body>
</html>
4

4 に答える 4

10

とメディア クエリを組み合わせますzoom。

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
    html {zoom:0.8;}
}
于 2012-08-13T18:12:31.800 に答える
5

メタ タグに maximum-scale を追加してみてください。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
于 2012-11-25T08:21:43.220 に答える
1

Cole がここで説明するように、JS を使用してメタ ビューポート タグを取り除くことができます - http://cole007.net/blog/136/responsiveish-viewport-hackコメントには別のオプションもあります

于 2013-01-28T07:35:18.330 に答える
0

Serban Ghita の php Mobile Detection メソッドを使用します。

https://github.com/serbanghita/Mobile-Detect

...次に、head タグ内のこの php:

<?php
if ($detect->isMobile() && !$detect->isTablet()) {?>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, max-scale = 1.0">
<?php } ?>

よく働く。

于 2014-01-13T11:37:11.107 に答える