私のウェブページが電話機で正しく動作しないが、デスクトップでうまく動作する理由

Question

HTML、CSS、jqueryでウェブページを作成しようとしています。しかし、問題は、Webページが電話やその他の小さな画面デバイスで適切に動作していないことです。このページにはlinkがあります。

Answer 1

解決策は非常に簡単です。応答性の高いレイアウトを作成するには、ピクセル（px）ではなく幅/高さと余白のパーセンテージを使用して、画面サイズが変更されたときに自動的にサイズを変更できるようにします。ボトムの自転車の画像を反応させるには、width: 95%とheight: 95%（またはその他のパーセンテージ）を使用します。 Bikerzのアイコンについては、margin:を使用してみてください。Google Chromeの検査機能は非常に便利ですので、テストしてください。 Webページを右クリックし、「Inspect」をクリックします。あなたがそこにいれば、「要素」セクションのアイコンが残っています。これをクリックすると、Webページのレイアウトをさまざまな解像度で表示できます。

Answer 2

モバイルデバイスをサポートするためにカスタムCSSを作成する必要がありますか、Bootstrapフレームワークを使用して携帯サイトを互換性のあるものにすることをおすすめします。ブートストラップを使用すると、ウェブ上の反応性の高い最初のプロジェクトを開発することができます。

cssを使用する場合は、canIuseまでさまざまなブラウザとモバイルプラットフォームでCSSのサポートを有効にすることをおすすめします。