javascript - すべての画面解像度に合わせたウェブページ

Question

このコードを使用して、ユーザーの画面解像度を自動的に検出し、別のページにリダイレクトします

<script>
if (screen.width==1367 && screen.height==768)
{
window.location="http://www.yoursite.com"
}
</script>

しかし、すべての画面解像度でサイトを編集することはできません。画面に自動的に収まる単一のページを作成することは可能ですか. 前もって感謝します。

Answer 1

JavaScript ではなく CSS3 メディア クエリを使用して、デバイスを検出し、それに応じてページを読み込むことができます。

@media only screen and (max-width: 999px) {
  /* rules that only apply for canvases narrower than 1000px */
}

@media only screen and (device-width: 768px) and (orientation: landscape) {
  /* rules for iPad in landscape orientation */
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* iPhone, Android rules here */
}

また、次のようにメタ ポート ビュー タグを追加する必要があります。

<meta name="viewport" content="initial-scale=1.0">

Answer 2

メディア クエリを使用して、画面ごとに異なるスタイルシートを指定できます。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

例えば

<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

すでに設置されているウェブサイトの例については、http: //mediaqueri.es/を参照してください。

Answer 3

「default1t」は書き込みです。また、css like=> "width:100%"; で設定することもできます。http://www.w3schools.com/js/js_window.aspも確認できます。すべてはあなたの要件に依存します。