モバイル用のサイズに指定しようとしているのですが、想定していないスペースができてしまっています。

今現在モバイル用のページを作成しています。その中で、viewportでページを指定しているのですが、指定したページの外側に空間ができています。この空間が無くしたいのですが、方法がわからない状態にあります。(画面指定した範囲だけ表示したいのですが)もしわかる方がいらしたら、どうぞ教えていただきたいです。

指定したページ

ページを小さくすると、ページにスペースができてしまう

css
1/*iphone 6・７・8 plus*/
2@media screen and (min-width: 370px) and (max-width: 399px) {
3    .sp { 
4        display: block;
5        max-width: 375px;
6   }
7}

view
1<!DOCTYPE html>
2<html>
3<head>
4   <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
5   <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
6   <%= csrf_meta_tags %>
7   <meta name="viewport" content="width=devise-width,initial-scale=1.0,user-scalable=no">
8   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" 
9   integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" 
10   crossorigin="anonymous">
11</head>
12<body>
13   <div class="sp">
14     <header class="wa">
15       <div class="inner">
16       </div>
17     </header>
18   </div>
19</body>

行動規範の内容に同意します

回答1件

ベストアンサー

以下を指定してみてください。

CSS
1body {
2  overflow-x: hidden;
3}

問題が解決するなら、最悪そのままでいいと思いますが、よりソースコードをきれいにするなら、例えば以下のようなCSS指定がないか探して見直す必要があると思います。

CSS
1/* width: 100%;と左右の余白が同時に指定されてしまっている。 */
2/* 以下の例だと「100% + 20px + 20px」となり、はみ出す原因となる */
3.container {
4  margin: 0 20px;
5  width: 100%;
6}

HTML
1<body>
2  ...
3  <!-- Bootstrapの前提: .rowが.containerの中に入っていない -->
4  <div class="row">...</div>
5  ...
6</body>

HTMLとCSSのソースコードがもっとあれば、より詳しい回答が得られると思います。

投稿2020/03/24 12:24

編集2020/03/24 12:26

new1ro

総合スコア4528

avicii

2020/03/24 14:55

回答ありがとうございます。このエラーが発生していました。Viewport argument key "width＝devise-width" not recognized and ignored. これが原因でしょうか？？

avicii

2020/03/24 15:15

.spにoverflow-x: hidden;を追加したら、実際に動くようになりました。有難うございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

モバイル用のサイズに指定しようとしているのですが、想定していないスペースができてしまっています。

関連した質問