スマートフォンでCSSの画像/背景が表示されませんか？

Question

本文にCSSスタイルシートを含むHTMLページがあります。私のPC（IE、Chrome、Firefox、Opera）のすべてのブラウザで動作しますが、スマートフォン（Android 4.4.2）から開くと、背景やボディの画像は読み込まれません。ここで

は背景のための私の@mediaルールです：

 <style type="text/css" rel="stylesheet" media="all"> 

.headerone {width:900px; 
        height:300px; 
        margin-left:243px; 
        text-align:center; 
        background-color:transparent; 
     } 

    .thead {font-family:"Traditional Arabic"; 
     font-size:60px; 
     text-align:left; 
     color:#A30B0B; 
} 

.pic {margin-left:10px; 
    border-radius:12px; 
    margin-top:10px; 
} 

body {background-image:url("sf1.jpg"); 
     background-repeat:no-repeat; 
     background-size:cover; 
     background-attachment:fixed; 

} 

.ex {font-family:"Traditional Arabic"; 
    font-size:24px; 
    text-align:center; 

} 



.toolbar 
    {width:1200px; 
    height:100px; 
    display:block; 
    margin:auto; 
    text-align:center; 
    font-family:Verdana; 
    font-size:16px; 
    background-color:#74391F; 
    text-decoration:none; 
    color:white; 
    border-radius:12px; 
    background-attachment:fixed; 

} 

.downbarcon, a:link{ 
        display:inline-block; 
        text-align:center; 
        text-decoration:none; 
        color:white; 
       } 

.downbarcon, a:hover, a:visited, a:active{background-color:#B29090; 
              color:white; 
              text-decoration:none; 

             } 

a:link { 
padding:0px 10px; 
word-wrap:normal; 
display:inline-block;} 

.downbar{ 
     position:relative; 
     display:inline-block; 
     } 

.downbarcon{ 
      display:none; 
      position:absolute; 
      width:260px; 
      box-shadow: 8px 4px black; 
      background-color:#74391F; 
      } 

.downbar:hover .downbarcon{ 
         display:block; 
         background-color:#74391F; 
         } 

#datas{margin-left:300px; 
     width:800px; 
     text-align:left; 
     font-family:"Traditional Arabic"; 
     font-size:18px; 
     background-color:beige; 
} 

p {font-family:"Traditional Arabic"; 
    font-size:18px; 
    margin-left:20px; 
} 

#frie {width:500px; 
     margin-left:470px; 
     background-color:white; 
     border-radius:16px; 
     font-family:"Traditional Arabic"; 
     font-size:18px; 
     text-align:center; 
    } 

.fot{width:200px; 
    height:100px; 
    text-decoration:none; 
    } 

.foot, .foot:link{ 
      text-decoration:none; 
      background-color:transparent; 
      text-align:left; 

} 

.like, .like:link, .like:hover, .like:active, .like:visited {   
     text-decoration:none; 
     background-color:blue; 
     color:white; 
     font-family:verdana; 
     font-size:12px; 
     margin-left:10px; 
     border-radius:12px; 
     border-right:3px solid white; 
     border-left:3px solid white; 
     border-top:3px solid white; 
     border-bottom:3px solid white; 
} 

.log { 
    border-radius:12px; 
    background-color:blue; 
    width:25px; 
    height:25px; 
    } 


.footer, .tess { 
      width:1200px; 
      margin:auto; 
      display:block; 
      text-align:center; 
      font-size:12px; 
      background-color:#A5978A; 
      color:black; 
     } 

私はディスプレイの変更を追加するためのクラスを使用して、画像のための通常のHTMLのルールを使用し、彼らは私から画像をロードしない理由を誰かが私に説明することができますスマートフォン？

Answer 1

代わりにメディアクエリを使用してください。同様に：

@media only screen and (max-width: 479px) { 

} 

または

デバイスのmin-widthとmax-widthの間に特定の幅をターゲットに

@media only screen and (min-width: 320px) and (max-width: 479px) { 

} 

はこのバイオリンのようにそれを使用します。

https://jsfiddle.net/cpmfyuws/2/