2017-06-19 12 views
0

友人のためのウェブページを作成しましたが、PC上ではすばらしいですが、デバイス上で見ると重大に見えます。モバイル向けに、よりシンプルでレスポンスの高いバージョンを作成しました。サイトにモバイルデバイスからアクセスしたときにモバイルバージョンを表示するようにコードするにはどうすればよいですか?私は自分のページでhtmlとcssを使い、ftpクライアントとしてはfilezillaを使用しています。何か助けてくれてありがとう、私はこれをオンラインで研究してきましたが、何度も混在した回答があり、決して直接答えは見つかりませんでした。多分私は質問を正しく聞いていないでしょうか?モバイルウェブサイトを自分のPCバージョンのWebサイトにリンクするには

+1

具体的な問題を明確にしたり、詳細を追加して必要なものを正確に強調してください。現在書かれているとおり、あなたが求めていることを正確に伝えるのは難しいです。この質問を明確にするための[ヘルプ]ページ(https://stackoverflow.com/help/how-to-ask)を参照してください。 **注**、ヘルプを求めている質問( "**なぜこのコードは動作しないのですか?**")には、** _質問自体**。参照:[最小限で完全で検証可能なサンプルの作成方法](http://stackoverflow.com/help/mcve) – LGSon

答えて

0

メディアクエリを使用して、使用するCSSを定義する必要があります。たとえば:

あなたはそれがモバイルデバイスから訪問された場合、あなたのモバイルサイトにデスクトップのサイトから自動リダイレクトを作りたいと仮定すると、
<link rel="stylesheet" media="(max-width: 800px)" href="mobile.css" /> 
<link rel="stylesheet" media="(max-width: 1800px)" href="computer.css" /> 
0

、最も簡単な方法は、Javascriptを

<script type="text/javascript"> 
if (screen.width <= 768) { 
document.location = "YOUR-MOBILE-SITE.com"; 
} 
</script> 

でそれをそれを行うことですブラウザのページ幅を確認して動作し、768px(通常はモバイルユーザーの幅がそれ未満)未満の場合、モバイルサイトにリダイレクトされます。

代わりに、サイトのCSSを変更するだけで(リダイレクトHTMLの変更なし)、リダイレクトの代わりにコードシートスタイルシートを使用すると、モバイルサイトにモバイル最適化CSSファイルが読み込まれます。

<!-- Desktop CSS File --> 
<link rel="stylesheet" href="screen.css" media="screen"/> 
<!-- Mobile CSS File --> 
<link rel="stylesheet" href="handheld.css" media="handheld"/> 
+0

助けをいただき、ありがとうございました!滑らかな走り。それは友人のための本当にシンプルなサイトですが、@ cobrasvg.comをチェックしてください。再度、感謝します。 –

関連する問題