ブラウザのサイズによって、画面が適する大きさになるようにしたいが変わらない状態になっています。

私は、ブラウザの大きさの変化によって、画面の表示を変化させるようにしたいのですが、変わらない状態になっています。サイズの修正のために、メディアクエリを設定しているのですが、それが機能していない状態になっています。もし、わかる方がいらしたら、どうぞ教えていただけたら、嬉しいです。

view
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <title>Like</title>
5    <meta name="viewpoint" content="width=devise-width,initial-scale=1.0">
6    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
7    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
8    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
9    <%= csrf_meta_tags  %>
10    <script type="text/javascript">
11      WebFontConfig = {
12        google: { families: [ 'Unica+One::latin' ] }
13      };
14      (function() {
15        var wf = document.createElement('script');
16        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
17          '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
18        wf.type = 'text/javascript';
19        wf.async = 'true';
20        var s = document.getElementsByTagName('script')[0];
21        s.parentNode.insertBefore(wf, s);
22      })();
23    </script>
24  </head>
25
26  <body>
27    <header class="header">
28      <div class="header__bar row">
29        <h1 class="grid-6"><a href="/">Like</a></h1>
30        <% if guider_signed_in? %>
31          <div class="user_nav grid-6">
32           <span><%= current_guider.nickname %>
33              <ul class="user__info">
34                <li>
35                  <a href="/guiders/<%= current_guider.id %>">マイページ</a>
36                  <a href="/guiders/<%= current_guider.id %>/go">ヘルプ</a>
37                  <%= link_to "ログアウト", destroy_guider_session_path, method: :delete %>
38                </li>
39              </ul>
40            </span>
41            <a class="post" href="/plans/new">happy</a>
42          </div>
43        <% end %>
44
45        <% if tourist_signed_in? %>
46          <div class="user_nav grid-6">
47            <span><%= link_to "Logout", destroy_tourist_session_path, method: :delete %>
48            </span>
49            <a class="post" href="/tourists/show">Contact</a>
50          </div>
51        <% end %>
52
53        <% if ! (guider_signed_in? or tourist_signed_in?) %>
54
55          <div class="grid-6">
56            <%= link_to "traveller", new_tourist_session_path, class: 'post' %>
57            <%= link_to "guider", new_guider_session_path, class: 'post' %>
58          </div>
59        <% end %>
60      </div>
61    </header>
62
63    <%= yield %>
64
65    <footer>
66      <p>
67        Copyright © 2018 Chance to Chance. All rights reserved.
68      </p>
69    </footer>
70  </body>
71</html>

css
1.row {
2  width: 100%;
3  max-width: 100%;
4  margin-left: auto;
5  margin-right: auto;
6  margin-top: 0;
7  margin-bottom: 0;
8  *zoom: 1;
9}
10.row .grid-1,
11.row .grid-2,
12.row .grid-3,
13.row .grid-4,
14.row .grid-5,
15.row .grid-6,
16.row .grid-7,
17.row .grid-8,
18.row .grid-9,
19.row .grid-10,
20.row .grid-11,
21.row .grid-12 {
22  float: left;
23  margin-left: 0.9%;
24  margin-right: 0.9%;
25}
26.row .grid-1 {
27  width: 6.53333%;
28}
29.row .grid-2 {
30  width: 14.86667%;
31}
32.row .grid-3 {
33  width: 23.2%;
34}
35.row .grid-4 {
36  width: 31.53333%;
37}
38.row .grid-5 {
39  width: 39.86667%;
40}
41.row .grid-6 {
42  width: 48.2%;
43  max-width: 100%;
44}
45.row .grid-7 {
46  width: 56.53333%;
47}
48.row .grid-8 {
49  width: 64.86667%;
50}
51.row .grid-9 {
52  width: 73.2%;
53}
54.row .grid-10 {
55  width: 81.53333%;
56}
57.row .grid-11 {
58  width: 89.86667%;
59}
60.row .grid-12 {
61  width: 98.2%;
62}
63
64@media  screen and (max-width: 400px) {
65  .row {
66    max-width: 100%;
67    width: 100%;
68    padding: 0 20px !important;
69  }
70  .row .grid-1,
71  .row .grid-2,
72  .row .grid-3,
73  .row .grid-4,
74  .row .grid-5,
75  .row .grid-6,
76  .row .grid-7,
77  .row .grid-8,
78  .row .grid-9,
79  .row .grid-10,
80  .row .grid-11,
81  .row .grid-12 {
82    float: none;
83    width: 100% !important;
84    max-width: 100%;
85    margin: 0 !important;
86    position: static !important;
87  }
88}
89/* max-width 640px, mobile-only styles, use when QAing mobile issues */
90@media screen and (min-width: 401px) and (max-width: 640px) {
91  .row {
92    width: 100%;
93    max-width: 100%;
94  }
95  .row .grid-1,
96  .row .grid-2,
97  .row .grid-3,
98  .row .grid-4,
99  .row .grid-5,
100  .row .grid-6,
101  .row .grid-7,
102  .row .grid-8,
103  .row .grid-9,
104  .row .grid-10,
105  .row .grid-11,
106  .row .grid-12 {
107    width: 100% !important;
108    max-width: 100%;
109  }
110}
111/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
112@media screen and (min-width: 641px) and (max-width: 1024px) {
113  .row {
114    width: 100%;
115    max-width: 100%;
116  }
117  .row .grid-1,
118  .row .grid-2,
119  .row .grid-3,
120  .row .grid-4,
121  .row .grid-5,
122  .row .grid-6,
123  .row .grid-7,
124  .row .grid-8,
125  .row .grid-9,
126  .row .grid-10,
127  .row .grid-11,
128  .row .grid-12 {
129    max-width: 100%;
130}

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

回答1件

ベストアンサー

"viewpoint" ではなく、"viewport" です。

HTML
1<!--meta name="viewpoint" content="..."-->
2<meta name="viewport" content="..." />

投稿2019/01/22 06:18

x_x

総合スコア13749

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.47%

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

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

質問する

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

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

ブラウザのサイズによって、画面が適する大きさになるようにしたいが変わらない状態になっています。

関連した質問