- ベストアンサー
javascriptで画面サイズごとの表示
- スマホからサイトにアクセスがあった場合に画像を非表示にする方法を探しています。
- CSSで試した結果、私のiPhone５ｓではうまく機能しなかったので、javascriptでの方法を試しています。
- 現在試している方法では、PC側でも画像が表示されなくなってしまっています。
- satisfied999
- お礼率34% (214/620)
- JavaScript
- 回答数3
- ありがとう数8
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
たぶんJavaScriptは関係なく、CSSの問題だと思います。 <div style="width:980px;"> のような、幅900pxを越える要素があるんじゃないでしょうか。 CSSのすべてを見直して、900px以下になるように書き直してみてください。 <table>に幅を指定していなければ基本的に折り返しなしで表示しますので、それにあわせてwindow幅も広がります。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞iPhoneの画面は９００PXもないので すが、iphoneは自動的に解像度を変更する機能がありますから。 全体が小さくなって表示されるはずです。 <meta name="viewport" content="width=device-width, initial-scale=1.0"> スタイルシート html {-webkit-text-size-adjust: 100%} @media screen and (max-width: 900px){ img.bigSize{ display:none; }/* 必ず基点となるセレクタを書く癖をつける */ } なお、画像を消すのではなく画像の大きさをリキッドにするほうが良いです。 900px程度で分けるのでしたら、ページ自体をリキッドで製作したので十分だと思います。 [HTML4.01](XHTML1.0,XHTML1.1含む) <body> <div class="header"> <h1><img src="[画像へのパス]" width="900" height="120" alt="このページのタイトル"></h1> </div> <div class="section"> </div> <div class="footer"> </div> </body> div.header,div.section,div.footer{ width:90%;min-width:630px;max-width:1000px; margin:0 auto;padding:5px; } div.header h1{ position:relative; } div.header h1 img{ display:block; width:100%;height:auto; } div.header{ background-image:url([背景画像へのパス]); background-size:cover; }
- babu_baboo
- ベストアンサー率51% (268/525)
@media screen and (min-width:480px) and (max-width: 768px){ /* style */ } そのほか、-webkit-device-pixel-ratio: だとか、max-device-width とかをぐぐると、 あなたに、しあわせがおとずれるかもしれない。
