はじめに
開発者ツールのモバイル版で電話アイコンと電話番号を横並びに表示するよう実装していたのですが、iphone(ios)のsafari上ではアイコンと電話番号が改行されていました。
原因
先輩からの助言もあり、問題特定のために、iphoneとmacを接続し、macの開発者ツールを起動しました。電話番号箇所を確認すると、テキストからaタグに変換されていたことが原因でした。cssファイルでaタグをdisplay: block;に指定していたため、予期せぬ形でdisplay: block;が効き改行されていました。このaタグへの変換はios特有の動きらしいです。
解決策
電話番号箇所のaタグをdisplay: inline;に指定することで改行されずにアイコンと電話番号を横並びに表示できました。