検索ボックスの表示がpcとスマホで違くなってしまう

■問題点
検索ボックスを作ったのだがpcとスマホで検索ボックスの表示が違くなってしまう

スマホ

php
1<h4 class="sidebar-title"><span>Search</span></h4>
2<form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>" class="search" id="searchform">
3    <label for="s"><?php _x('Search for:', 'label'); ?></label>
4    <input type="text" value="<?php echo get_search_query(); ?>" role="search" method="get" class="searchbox" name="s" id="s" placeholder="Search for">
5    <input class="submit fa fa-2x" value="&#xf002" type="submit" id="searchsubmit" value="<?php echo esc_attr_x('Search', 'submit button'); ?>">
6</form>

scss
1form.search {
2                        position: relative;
3                        display: flex;
4                        padding: 20px 0;
5                        input {
6                            position: absolute;
7                            top: 0;
8                            right: 30px;
9                            background: 0 0;
10                            height: 34px;
11                            
12                            border: none;
13                            
14                            &.searchbox {
15                                width: 90%;
16                                padding: 10px 0;
17                                border: 1px solid #dfe6e9;
18                                border-radius: 5px;
19        
20                            }
21                            &.sumbit {
22                                border: none;
23                                background-color: transparent;
24                                position: absolute;
25                                right: 50%;
26                                top: 50%;
27                                transform: translateY(50%);
28                            }
29                        }
30                    }
31                    h3{
32                        font-size: 1.5rem;
33                        margin-bottom: 10px;
34                    }
35                    .not-found-category__list{
36                        list-style: none;
37                        li{
38                            margin-left: 10px;
39
40                        }
41                    }

■補足
pcはデベロッパーツールで見ているのですがpcでは正常です。
ですがiphoneで見ると写真みたいに崩れてしまいます。

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

回答1件

html
1<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

みたいな記述がなくて縮小表示されてるとかですかね

デベロッパーツールってSafariですかね
Safariのレスポンシブデザインモードはあんまり信用ならないんですよね
実機のサイト全体を画面にフィットさせる処理が再現しない

Chromeの検証のほうが実機に近いです

投稿2020/09/02 09:17

KazuhiroHatano

総合スコア7804

cafe1111

2020/09/02 09:51

コードをformのなかに入れて見たのですが変わらなかったです、、 safariではなくchromeの検証ツールを使っています。

KazuhiroHatano

2020/09/02 10:00

<form>の中じゃなくて<head>の中に書くコードです

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

あなたの回答

tips

プレビュー

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

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

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

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

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

検索ボックスの表示がpcとスマホで違くなってしまう

関連した質問