CSSボタンがデベロッパーツール確認時には問題ないが、iphone実機確認時にはレイアウトが崩れてしまう

Question

前提・実現したいこと

スマートフォン用でみれるサイトを作成中です。作成したボタンをchromeのデペロッパーツールのiphone　Xサイズで確認した際は問題がなく表示されるのですが、実機iphone12で見た際にはボタンの中の文字が意図しないところで改行されたり、ボタンの配置がズレてしまっています。-webkit-appearance: none;を記載して試しましたが特に変化は見られませんでした。

ちなみに２つボタンがあるうち、.record-btnの方だけレイアウトが崩れてしまいます。

恐れ入りますが、解決策ご教示いただけると幸いです。

問題となっている箇所画像

デベロッパーツール確認時

iphone確認時（画質悪くてすみません）

該当のソースコード

#css
@media screen and (max-width:500px) {
  .container-fluid{
    text-align: center;
  }
   .main {
     position: relative;
     display: inline-block;
     width: 320px;
     height: 360px;
   }
   .background-image {
     width: 320px;
     height: 360px;
   }
   .record-btn {
     -webkit-appearance: none;
     background: #e96e63;
     position: absolute;
     top: 68%;
     left:22%; 
     padding: 4px 10px;
     color: #fff;
     border: 2px solid #eee;
     border-radius: 10px;
     font-family: 'Kosugi', sans-serif;
     font-size: 5px;
     text-align: center;
   }
   .recording-btn {
     -webkit-appearance: none;
     background: #e96e63;
     position: absolute;
     top: 68%;
     left:24%;
     padding: 8px 20px;
     color: #fff;
     border: 3px solid #eee;
     border-radius: 10px;
     font-family: 'Kosugi', sans-serif;
     font-size: 10px;
     text-align: center;
   }
}

#html
<div class="container-fluid" v-if="screen=='recordingScreen'" key="recordingScreen">
  <div class="main">
 　　　　<%= image_tag 'face.png', class: 'background-image' %>
   <button class="record-btn" type="button"  v-if="status=='ready'" @click="startRecording">
 　　　　  さっそく声の成分をチェック!!!!&nbsp;<i class="fas fa-microphone fa-lg"></i><br>
　　　　　　  (５秒間のマイク録音が開始されます)
   </button>

   <button class="recording-btn" type="button" v-if="status=='recording'">
 　　  <span id="sec"></span>&nbsp;<i class="fas fa-microphone fa-lg"></i>
   </button>
  </div>
</div>

試したこと

-webkit-appearance: none;を記載して試しましたがレイアウト崩れは変わりませんでした。

Comments

[Lhankor_Mhy]

vueを使っているのであれば、そのコードはレンダリングされているものと異なる場合があるのではないでしょうか？

レンダリングされたHTMLはご提示いただけますか？

[hasaya]

ご連絡ありがとうございます。レンダリングされたHTMLはデベロッパーツールのElements上で出てくるコードということでしょうか？

それであればrecord-btnの方だけなのですが、
<button type="button" class="record-btn">
" さっそく声の成分をチェック!!&nbsp;"
<i class="fas fa-microphone fa-lg">
:: before
</i>
<br>
"(5秒間のマイク録音が開始されます)"
</button>

という風になってます

[Lhankor_Mhy]

ありがとうございます、拝見します。

[hasaya]

恐れ入ります、宜しくお願い致します。

[Lhankor_Mhy]

ご提示のコードを試してみましたが、「ボタンの中の文字が意図しないところで改行されたり、ボタンの配置がズレて」という現象を確認できませんでした。（iOS14.6 iPhone12mini）

ご提示いただいていない部分に原因があるのかもしれません。

[k_a]

意図しない状態がどうなっているかわからないので、正しい状態と意図しない状態の画像があれば何か判断出来るかもしれません。

[hasaya]

ありがとうございます。正しい状態と意図しない状態の画像追加しました！

[Lhankor_Mhy]

ご提示のコードでは、PCのレスポンシブモードでもボタンが中央に来ることはありませんでした。（下部左寄りに配置されています）

ご提示のコード**だけ**で問題が再現することを、ご質問者の環境で確認してから質問をしてください。
それぞれが違うコードを見ながら違う現象について議論をするのは、お互いに時間の無駄ではありませんか？
https://twitter.com/lhankor_mhy/status/1169432868705075200

[k_a]

Lhankor_Mhyさんの言う通りご提示頂いていない部分に問題がありそうです。
私の見る限り、記載されているコードには後ろの大きな丸の要素が含まれていないような気がします。

ボタンのサイズを明示的に指定していないようですし、デベロッパーツールで上手く表示できているのがたまたまなのではないかとも思えます。
left:22%で中央に表示されているのも不思議です。

公開できる範囲でもう少し多くのコード、可能なら実際のサイトが見られればわかるかもしれません。

[hasaya]

仰る通りソースコード不足しておりました。申し訳ありません。追加をしました。（実際のサイトはまだ公開まで行っていない為すみません）後ろの大きな丸は背景画像部分の一部です。またボタンに関するソースコードは全て載せたのでもしかしたらボタンのサイズ明示の部分が不足しているのかとも思っています。

[k_a]

最終的にどういう形にしたいかコードから読み取れないので、とりあえず中央にしたいのであればabsoluteで無理やり合わせるよりもflexboxを使ったほうがいいと思います。
意図しない改行を防ぎたいならwhite-spaceも追加で。

.container-fluid {
display: flex;
/* text-align: center; */

/* ここから追加 */
justify-content: center;
align-items: center;
/* ここまで */
}

.main {
/* position: relative;
display: inline-block; */
width: 320px;
height: 360px;

/* ここから追加 */
display: flex;
justify-content: center;
align-items: center;
/* わかりやすいようにボーダー追加してます。消してください */
border: 1px solid red;
/* ここまで */

}

.record-btn {
-webkit-appearance: none;
background: #e96e63;

/* position: absolute;
top: 68%;
left: 22%; */

padding: 4px 10px;
color: #fff;
border: 2px solid #eee;
border-radius: 10px;
font-family: 'Kosugi', sans-serif;
font-size: 5px;
text-align: center;

/* ここから追加 */
white-space: nowrap;
/* ここまで */
}

[hasaya]

返信遅くなり申し訳ありません！ご丁寧にありがとうございます！これから試してみます！

Answer 1

記入遅くなりましたが、上記方法で解決しました！！色々至らない点ご指摘もいただき本当にありがとうございました！！