スマートフォンにウェブを完全にフィットさせるにはどうすればいいですか？

-1

あなたのスマートフォンでlinkを見てください、あなたは少しオフであることがわかります。私はすべてを集中させ、ウェブはデスクトップでうまく見えますが、スマートフォンでは見えません（私はiPhone 5Sを使用しています）。どのような方法で私はスマートフォンの任意の種類のデスクトップのようにすることができますか？どこでもスクロールできないGmailアプリのように見えるようにする方法はありますか？スマートフォンにウェブを完全にフィットさせるにはどうすればいいですか？

headタグで次のコードのようにすべて調整しました。しかし、それは動作していません。デスクトップで検索する必要がある場合のURLは次のとおりです。https://johnny00520.github.io/Test.git.io/

ありがとうございました。

<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> 

<title>MindScribe</title> 
<!--<meta name="description" content="An interactive getting started guide for Brackets.">--> 

<!-- Maybe I need. Note that Android and iOS ignore media="handheld"--> 
<link rel="stylesheet" media="handheld, only screen and (max-device-width: 320px)" href="phone.css"> 
<link rel="stylesheet" media="only screen and (min-width: 641px) and (max-width: 800px)" href="ipad.css"> 

<!-- media="handheld" trick for Windows Mobile --> 
<link rel="stylesheet" href="screen.css" media="Screen"> 
<link rel="stylesheet" href="mobile.css" media="handheld"> 

<!--smartphone conpatible--> 
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes" /> 
<!-- Home screen icon --> 
<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" /> 
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" /> 

<!--[if lt IE 9]> 
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<link rel="stylesheet" href="css/main.css">

出典

2017-08-23 Johnny

「*あなたはそれが少しオフ*だと見ることができます」。私のためではない - サイトはモバイルの幅でうまく見える。 **あなたの質問を更新して、**関連するコード**を、質問そのものの[**最小で、完全で、検証可能な例**]（http://stackoverflow.com/help/mcve） *明らかに**状態**正確に**問題は何ですか。 –

*「あらゆる種類のスマートフォン用のデスクトップのようにできる方法はありますか？」「いいえ、あなたもしたいですか？ウェブの要点は、あなたが使用しているデバイスや条件に適応して流れていくことです。ブラウザからブラウザ、デバイス間で普遍的なものはありません。何も問題はありません。あなたが修正したいいくつかの特定のことがあるなら、あなたの質問でそれを明確にしてください。 – Brad

次のことを試してみてください。

はbodyに次のCSSプロパティを追加します。

box-sizing: border-box; 
overflow: hidden; 
margin: 0; 
padding: 0;

ボックスsizng - 幅と高さのプロパティ（および最小/最大プロパティ）にはコンテンツ、パディング、境界線が含まれますが、マージンは含まれません。

オーバーフロー - スクロールを防止します。

パディング&マージンリセットブラウザで生成された余分なスペースをクリーンアップするだけです。

これは、ビットをあなたの#cursiveタイトルを押し上げるだろうが、あなたはのは（自分の利益のために微調整）としましょうとそれをダウンさせることができます。

margin: 4em 0 1em;

あなたが@mediaクエリ内で上記を追加することを選択することができますモバイルビューポートだけかどうか、（自分の利益のために微調整値）のようなものが考えられます。

@media (max-width: 768px) { 
    body { 
    box-sizing: border-box; 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
    /* etc */ 
    } 
}

出典

2017-08-23 22:42:48 Syden

スマートフォンにウェブを完全にフィットさせるにはどうすればいいですか？

答えて

関連する問題