iPhoneデバイスで表示が崩れる

Question

webサイト制作中です。
サーバーにファイルをアップロードしたところ、PC表示は問題ないのですが、
iPhoneデバイスで一部表示がおかしくなりました。
解決方法がわからないので、お力をお貸しください。

1.header画像がcenter表示されない
PCでは

        padding: auto;
        margin: auto;
        
        height: 100vh;
        background-image: url("../images/top/xxx.jpg");
        background-size: cover;
        background-position: center;
        background-attachment: fixed;

上記記述で、希望通りの表示(widthに余白があり、heightは画像がフルスクリーン表示)がされているのですが

スマホ(iPhone)では

        padding: 0;
        margin: 0;
        
        height: 100vh;
        background-image: url("../images/top/xxx.jpg");
        background-size: cover;
        background-position: center;
        background-attachment: fixed;

で、フルスクリーン表示自体はできているのですが、画像センターにある対象物が全く表示されません。
表示されている画像を見る限り、画像の４隅のどこかの部分がフルスクリーン表示されているようです。

ローカルやPC表示からデベロッパーツールを使い、スマホ表示させる際には
希望通りに、画像センター部分がフルスクリーン表示されています。

2.fontelloで作成したFontアイコンがiPhoneで表示されない。
fontelloでLINE@のFontアイコンを作成したのですが、
PCでは表示されるにもかかわらず、iPhoneでは×表示になってしまいます。

上記２点とも、PCでは希望通りに表示されているので、
iPhone特有の表記を別に書かないといけないのでしょうか。

先輩のみなさま、どうぞよろしくお願いします。

追記1
androidデバイスでは、1の表示は問題なく
２のフォント表示だけが×担っていました。

http://shogun-burger.com/

Comments

[kei344]

書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）か、再現するURLを提示されたほうが回答を得やすいと思います。

[kei344]

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文を編集することをお勧めします。

[mikihonda]

kei344さん、重ね重ねすみません！ご指摘ありがとうございます。本文に追記いたしました。

Answer 1

1

header {
    background: url(../images/top/top_burger.jpg) center center /cover no-repeat;
    
    #header_in {
      padding: 0;
        margin: 0;
        height: 100vh;
        width: 100%;

#header_in ではなく、 header に背景画像を入れたことで解決しました。

2
Fontに関しては、スマホ全般がどうしても表示されないので
画像で対処することにしました。