1

更新 私は自分の質問を解決しました。下記参照。


サイトのスタイルを設定するために、ブートストラップと追加の @media クエリを使用してサイトを作成しました。デスクトップではブラウザーのサイズを変更するとモバイル レイアウトが表示されますが、携帯電話では全幅のサイトが読み込まれます。Nexus S で Chrome を使用しています。

http://conversing.ca

私は同様の問題を持つ投稿を見てきました。HTML 内のビューポート メタ タグ、ハンドヘルド メディア タグを確認しました。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen,handheld" href="bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" media="screen,handheld" href="style.css" />

CSS (スタイル.css)

別の投稿から見た #wrapper 行を追加しましたが、それも機能しませんでした。モバイルで開発ツールを表示する方法があればいいのに。

@media handheld, screen and (max-width: 767px){

#wrapper{width: 767px;}

body {
padding-right: 0px;
padding-left: 0px;
}

.hero-unit {
margin-top:0px;
padding-left: 12%;
}

.iphone {
top: auto;
left: 0;
position: relative;
}

input,button{
width: 90%;
margin: 0 auto;
}

#footer {
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 20px;
}
}
4

2 に答える 2

1

私は自分の質問を解決しました。障害は、「noresize」タグを使用したドメインマスキングからのiframeでした。そのためのHTMLを編集できなかったので、この機能を無効にしました。これで、携帯電話にモバイルレイアウトが表示されるはずです。

于 2012-11-05T22:28:39.167 に答える
0

私の最初の「推測」は、「ハンドヘルド」を削除することです。「ハンドヘルド」クエリはあまりサポートされていません。

于 2012-11-05T18:40:07.040 に答える