3

これはモバイルビューのWebサイトです。

ウェブサイトの幅は640ピクセルですが、iPhoneはドキュメントを678ピクセルでレンダリングします。アンドロイドではそれは素晴らしく見えます。

ビューポートメタを追加しました：

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

そして本体のCSSは次のとおりです。

body,html{
margin:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
font-size:14px;
font-family: "Arial";
background: white;
direction: rtl;
text-align: right;
width:640px !important;
overflow: hidden;}

iPhoneでは次のようになります。

ご覧のとおり、左側に38ピクセルが追加され、ボディとは関係ありません（ボディの背景を青に設定した場合、側面は白のままです）。

私はすべてを試しましたが、運がありませんでした。何か案は？

4

2 に答える 2

4

まず、クリーンなHTMLとCSSから始めると役立ちます。HTMLは有効とはほど遠いため、あらゆる種類のエラーが発生する可能性があります（ HTMLエラーについてはこちらを参照してください...）。

第二に：

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

間違っている。次のようにする必要があります。

<meta name="viewport" content="width=640, user-scalable=yes">

次のような場合は、より良い方法になります。

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

（ここを参照）。

クリーンな開始点を使用すると、デバッグが容易になります。また、Mobile Safariデバッグコンソールをオンにして、メッセージが表示されたら応答します。

于 2012-09-02T15:07:07.263 に答える
0

私はついに解決策を見つけました。

これらの行は、本体のCSSが正しく配置されているために追加されました。

text-align:right;
direction:rtl;

これらの行を削除して、ボディ内のdivに追加すると、正常に機能します。

于 2012-09-05T00:51:43.967 に答える