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

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

ボックス内に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">ボタン１</a>
12      </p>
13      <p class="right">
14        <a href="#" class="link">ボタン２</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    }

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

回答1件

ベストアンサー

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の対応範囲を見直されるといいかもしれません！

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