HTML。ウェブサイトを他のデバイスや画面に合わせるには？

Question

私は最近、ウェブサイト（http://calcultr.comxa.com/）で「完了」しました。私の画面では上手く見えますが、私の友人の画面では画面に合っていません。他のデバイスと同じです。私は頭のタグにこれを追加しました：

<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta content="text/html; charset=utf-8" http-equiv="content-type"> 
<meta name="viewport" content="width=device-width, intial-scale=1"> 

私は「問題を解決します」と言って、多くの人が聞いたことがあるが、それは私もそれが何を意味するのかわかりませんしませんでした。それらは横たわっていたのですか？ ウェブサイトをどのようにデバイスや画面に合わせるには？

ありがとうございます。 :)

Answer 1

他の解決策があるため、あなたのウェブサイトはあなたの友人のコンピュータに正しく表示されません。それはフロントエンド設計の複雑な部分です。あなたは1つの解像度/デバイス/スクリーンのためにあなたのウェブサイトを設計しました。残りのためにそれをしなければなりません。あるいは、ほとんどのデバイスやスクリーンでうまく機能するソリューションを考え出す必要があります。あなたのページは、ユーザーの画面の割合に適応するようにCSSで

1. デザイン使用割合：

   これらはあなたが持っているオプションがあります。 CSS - Percentages or Pixels?

2. メディアクエリを使用して、ユーザーに応じてピクセルサイジングを調整します。上述したよう

   https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 2

、

<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta content="text/html; charset=utf-8" http-equiv="content-type"> 
<meta name="viewport" content="width=device-width, intial-scale=1"> 

は...ソースコードの先頭に追加されませんでした。そしてそれを反応的にしようとするなら、あなたはcssメディアクエリを追加したいかもしれません。

例えば、

@media screen and (min-width: 480px) { 
    body { 
     background-color: blue; 
     //whatever styling... 
    } 
} 

Answer 3

は、ブートストラップを見てみてください。これは本当にシンプルで、あなたのIDとクラスにいくつかの名前を付けるだけで、すべてのデバイスに応答することができます:) linkは、これが役立つことを願っています！あなたは、フロントエンドの設計のためのクロスブラウザの互換性が必要な場合は

Answer 4

は、あなたのWebページで上記のコードを入れて、それが動作します