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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

10382閲覧

【css】display:flexで横並びにしたボタンがiphone6・iphone6sでの確認で差異がある

miyoshi_work

総合スコア69

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2016/12/27 03:06

編集2016/12/27 03:10

いつもお世話になっております。

ボックス内にdisplay:flexで二並びのボタンを並べました。
iphone6s、iphone5、Chromeのデベロッパーツールでの確認では特に問題が起きていないのですが、
実機のiphone6(客先のスマホ)で確認した際にのみ、画像のようになってしまいます。

イメージ説明
(実際のキャプチャ画像ではなく再現です)

flexが効いてないように見えるのですが、特定の機種でのみ効かないなんてことはあり得るのでしょうか?
何かiphoneでの設定があるのでしょうか?

シークレットブラウザ、更新、cssの新規作成等は試したのでキャッシュの可能性はないと思われます。

客先のスマホの設定がわからないのでなんとも言えないですが、
手元のiphone6sはiOS10.2です。
Safari、Chromeともに崩れは起きておりません。

iphone6の実機が手元になく、状況の確認、再現が出来ず、調べても同じような事例が出てこなかったのでご教授いただければ幸いです。

下記はhtml、cssになります。

html

1<html> 2<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"> 3<head> 4</head> 5<body> 6 <div class="list_separate"> 7 <div class="elm"> 8 テキストテキストテキストテキストテキストテキスト 9 <div class="box_btns"> 10 <p class="left"> 11 <a href="#" class="link">ボタン1</a> 12 </p> 13 <p class="right"> 14 <a href="#" class="link">ボタン2</a> 15 </p> 16 </div> 17 </div> 18 </div> 19 </body> 20</html>

css

1 .list_separate .elm { 2 margin-bottom: 10px; 3 position: relative; 4 border: none; 5 background-color: #fff; 6 box-shadow: 0 4px 4px rgba(0,0,0,0.4); 7 border-top:1px solid #efefef; 8 } 9 .box_btns { 10 padding: 4px 6px; 11 display: -ms-flex; 12 display: flex; 13 -webkit-box-pack: start; 14 -webkit-justify-content: flex-start; 15 -ms-flex-pack: start; 16 justify-content: flex-start; 17 } 18 .box_btns .left, 19 .box_btns .right { 20 position: relative; 21 -ms-flex: 0 0 50%; 22 flex: 0 0 50%; 23 -webkit-box-sizing: border-box; 24 box-sizing: border-box; 25 padding-right: 2px; 26 padding-left: 2px; 27 } 28 .box_btns .left::before, 29 .box_btns .right::before { 30 width: 32px; 31 height: 32px; 32 margin: auto; 33 position: absolute; 34 z-index: 2; 35 top: 0; 36 bottom: 0; 37 left: 4px; 38 display: block; 39 content: ''; 40 border-radius: 32px; 41 } 42 .box_btns .left::before { 43 background-position: 4px center; 44 } 45 .box_btns .right::before { 46 background-position: -32px center; 47 } 48 .box_btns .left::before { 49 background-color: #de3b3b; 50 } 51 .box_btns .right::before { 52 background-color: #343434; 53 } 54 .box_btns .link { 55 display: block; 56 padding: 0 10px 0 42px; 57 font-size: 14px; 58 font-weight: bold; 59 -webkit-box-sizing: border-box; 60 box-sizing: border-box; 61 letter-spacing: 2px; 62 color: #fff; 63 background: none; 64 background-repeat: no-repeat; 65 background-position: right center; 66 -webkit-background-size: 19px 14px; 67 background-size: 19px 14px; 68 height: 38px; 69 line-height: 38px; 70 border-radius: 38px; 71 } 72 .box_btns .left .link { 73 background-color: #343434; 74 } 75 .box_btns .right .link { 76 background-color: #de3b3b; 77 }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

autoprefixer等も使われているのでそのへんの問題ではないとは思いますが、一番早いのはそのiphoneの中のsafari自体でconsoleを開きどういう風になっているのかを検証することです。

幸い、iOSの場合、macのsafariを使用して今見ているiphoneの実機のブラウザをデバッグすることが出来ます。
そちらを使ってみるのはいかがでしょうか???
iOS SafariのWebインスペクタをMac Safariで表示してデバッグする

投稿2016/12/27 03:12

MasakazuFukami

総合スコア1869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyoshi_work

2016/12/27 03:18

ご回答ありがとうございます! Macで実機のデバックが可能だったのですね、知りませんでした。 客先のスマホなのですぐにとは行きませんが試したいと思います。 ありがとうございました。
MasakazuFukami

2016/12/27 03:25

すいません。 たしかに実機デバッグが出来ないと書いてありますね!! autoprefixerの設定範囲をもう一段下げてみてはいかがでしょうか? 目視でコードを拝見している範囲だとdisplay: flexの対応が少し足りていないようです。 ```css .box_btns{ display: -ms-flex; display: flex; } ``` となっていますが、もう少し古いiOSに対応するためにはboxプロパティというものも必要です。 ```css .box_btns { display: -webkit-box; //これ display: -webkit-flex; display: flex; } ``` flexbox自体、ココ数年で何回も仕様が変更されてしまっているので対応状況がちょっと複雑なんですよね。。。 詳しくは以下のLIGの記事を拝見されるといいと思います!! [CSS3のFlexboxを基本から理解して、使い倒そう!](https://liginc.co.jp/web/html-css/css/21024)
miyoshi_work

2016/12/27 03:59

ご回答ありがとうございます! -webkit-box; 追加して確認していただいたところ無事表示されたようでした。 iOSのバージョンが8未満だったのが原因だったようです。 助かりました、ありがとうございます!
MasakazuFukami

2016/12/27 04:01

おぉ!!!解決したようでよかったです!! align-itemsなども対応していなかったような気がしますのでもしautoprefixerを入れている場合は、autoprefixerのiOSの対応範囲を見直されるといいかもしれません!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問