モバイルウェブサイトを構築していて、反応しないようにしてください。私は各デバイスのメディアクエリを使用しています。あなたはそれが良いアイデアだと思うかもしれないし、そうでないかもしれないが、私はサイトがわずか3ページで、非常に小さく、携帯電話でしかアクセスできないので、このようにしたい。iPhoneと同じではないChromeエミュレータ - より優れたエミュレータですか？
私の問題は、私が所有していない携帯電話に対応できるように、良いエミュレータが必要だということです。私はテストするiPhoneしか持っていないし、Chromeはマッチングしていない。そこに良いエミュレータがあるのですか、何か間違っていますか？
感謝。
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0"/>
あなたのCSSシートはどこですか？私は、問題を解決した下
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/* iPhone 6 landscape */
@media only screen and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{ }
/* iPhone 6 portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{ }
/* iPhone 6 Plus landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 3)
{ }
/* iPhone 6 Plus portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 3)
{ }
/* iPhone 6 and 6 Plus */
@media only screen
and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px)
{ }
/* Apple Watch */
@media
(max-device-width: 42mm)
and (min-device-width: 38mm)
{ }わずかなブレークポイントでレイアウトを動作させることができるときに、特定のデバイスに対して非常に多くのメディアクエリを使用するのはなぜですか？意味がありません... –
私のスタイルシートはこの質問に何が関係していますか？ Chromeが自分のスタイルシートを携帯電話で見ているのと同じようにエミュレートしないのはなぜですか？それが問題です。 @マッティはそれを休んだ。どのようにあなたは質問に答えるか、それを残してください。 – Benjamin
@ベンジャミン：正しい答えは「間違っている」ということがあります。 –
にこのすべてを追加します。私は、次のコードを使用してのindex.htmlからリダイレクトされた：
if (screen.width < 765) {
window.location = "http://www.myaddress.com/index2.html";
}
私はこのコードを削除し、私のindex.htmlを自分の携帯電話のウェブサイトのインデックスファイル作ったら、クロムエミュレータは、実際の画面と同じでした。
なぜこのようなことが起こったのかわかりません。何とかjavascriptでリダイレクトすると、リダイレクトされたアドレスに別のビューポートが作成されました。
*存在するすべてのデバイスに*のメディアクエリを使用していますか？しかし、何千もある。それをやめて正しくやってください。 –
文書の 'head'に' meta name = viewport content = "width = device-width、initial-scale = 1"> 'がありますか？ @AlonEitanによるコメントを明確にするため、推奨されている「」は、ウェブサイトのロード時にピクセル密度ではなく実際のピクセル幅に基づいてウェブサイトをレンダリングするようにデバイスに要求しています（ –
）。あなたはズームアウトされましたが。 –