5

私はビューポートをいじっていて、幅を 520 にしようとしましたが、代わりにデバイス幅を行うようです。何か案は？

<html>
<head>
<meta name="viewport" content="width=520, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
h1
{
    width: 980px;
    border: 1px solid red;
}

h2
{
    width: 520px;
    border: 1px solid green;
}

h3
{
    width: 320px;
    border: 1px solid green;
}

</style>
</head>

<body>
<h1>I am a big heading 980px wide. Yes I am</h1>
<h2>I am a big heading 520px wide. Yes I am</h2>
<h3>I am a big heading 320 wide. Yes I am</h3>
</body>
4

4 に答える 4

0

幅をビューポートのメタ タグに依存するのは困難です。この記事が指摘しているように：

ピクセル数が多すぎるため、形式screen.widthがあまり意味をなさない場合があります。たとえば、Nexus One の正式な幅は 480 ピクセルですが、Google のエンジニアは、device-width を使用するときにレイアウト ビューポートの幅を 480 ピクセルにするのは多すぎると判断しました。彼らはそれを 2/3 に縮小したので、デバイスの幅は iPhone と同じように 320px の幅になります。

これらの 320px は「CSS ピクセル」です。つまり、デバイスまたはドキュメントの実際の幅に関係なく、320 ピクセルがビューポートの幅です。

電話の実際のサイズよりも大きい (または小さい) 幅を指定し、縮尺を制限している場合、問題が発生します。削除initial-scale=1, maximum-scale=1,して、ブラウザがページをデバイスに正しく合わせられるようにします。user-scalable=noとを引き続き使用できますwidth=520。

于 2013-07-19T14:00:19.823 に答える