2016-05-16 21 views
0

私はサイトを構築し、モバイルレスポンスにしたいと考えています。レスポンシブデザインのウェブサイトを作成するにはどうすればよいですか?

ChromeやFirefoxでは動作しますが、モバイルでは動作しません。

デスクトップブラウザでは正しく動作していますが、モバイルでは動作していませんが、Inspectでテストしました。

どうすればこの問題を解決できますか?

+0

あなたの質問は非常に幅広いです。レスポンシブサイトの設計には多くの方法がありますが、StackOverflowの目的は、非常に構造化された特定の問題や質問に対する具体的かつ具体的な回答を提供することです。あなたが試したことを分かち合うことができますか?それはうまくいきませんか? – GMchris

+0

ブラウザの幅を320pxに変更すると、デスクトップ上で完全に機能しました。しかし、モバイルで正しく動作していない。これをどうすれば解決できますか?ブラウザがモバイルブラウザに持っている要素を調べるようなツールはありますか? – Guru

+0

もう一度、それを見たり、説明しなくても、何が「壊れている」と言うのは難しいです。できれば、jsfiddleを投稿してください。 – GMchris

答えて

2

最初に、ビューポートをHTMLページに追加する必要があります。このヘッドタグ内

タイプ:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

その後は、私は個人的にあなたがbootstrap.cssファイルをリンクしている場合、それはより良いことだと思います。 CSSのメディア画面を次のように使用することをお勧めします。

@media screen and (max-width: 800) { /* The CSS codes when the device is less than 800 go here */ } 少なくとも私のやり方です。

あなたは、私がYouTubeで見たビデオをダウンロードしたり、見ることができます。私はそれが名前かリンクであることを覚えていないが、その長さは1時間以上で、男はジムウェブサイトのウェブページを作っていた。

これらをコピーして貼り付けるのではなく、自分で入力することを強くお勧めします。単純なものならこれらの種類を参照しないように、それぞれの意味を理解するのに役立ちます。

+0

あなたの助けをありがとう。しかし、私はモバイル対応の標準を求めていません。デスクトップのウィンドウのサイズを変更するとうまく動作します。しかし、携帯ではありません。 – Guru

+0

私は何年も大文字のファイル拡張子を使用している人は見ていません... – Martin

+0

あなたの携帯電話は800よりも大きいかもしれないと思いますので、別の大きなメディア画面を追加したり、私が質問を誤解している場合は、私を修正してください。 –

関連する問題