html - iPad および iPhone の CSS 背景画像固有のルール

Question

WordPress サイトで作業していますが、iPhone と iPad で背景画像が正しく表示されません。iPhone と iPad で背景画像を完全に除外するには、CSS スタイルシートに何を配置すればよいか教えてください。

あなたの助けに感謝します。

EDITこれをstylesheet.cssに追加しましたが、まだ正しく機能していません。

    /* iphone 5 */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
    background-image: none; 
    background-color: #ffffff;
}


/* iphone 2-4 */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
    background-image: none; 
    background-color: #ffffff;
}

/* ipad mini */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)  {
    background-image: none; 
    background-color: #ffffff;
}

/* ipad 1-2 */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){
    background-image: none; 
    background-color: #ffffff;

}

Answer 1

Javascriptでこれを行うことができます

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
      document.getElementById('myDiv').style.background = "none";
}

Answer 2

別のスタイルシートを追加し、ユーザー エージェント文字列が iPhone または iPad と一致する場合はそれを追加する必要があります。

IS_IPAD = navigator.userAgent.match(/iPad/i) != null;
IS_IPHONE = (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null);
if (IS_IPAD) {
    IS_IPHONE = false;
}