現在の問題点
現在、私はレスポンシブwebデザインを使い一つのサイトを完成させようとしている初心者です。
今回、問題になっている点はスマートフォンで見た際に起きる現象です。現在私は友人のサーバーを借りてスマホではどのように見えているかを試しながら作っています。
<div id="top_all_work"> <!--loading_pictures--> <div id="picture"> <img id="1" src="./img/Practice_picture/1.JPG" alt=""> <img id="2" src="./img/Practice_picture/2.JPG" alt=""> <img id="3" src="./img/Practice_picture/3.JPG" alt=""> <img id="4" src="./img/Practice_picture/4.JPG" alt=""> <img id="5" src="./img/Practice_picture/5.JPG" alt=""> <img id="6" src="./img/Practice_picture/6.jpg" alt=""> <img id="7" src="./img/Practice_picture/7.JPG" alt=""> <img id="8" src="./img/Practice_picture/8.JPG" alt=""> <img id="9" src="./img/Practice_picture/9.JPG" alt=""> <img id="10" src="./img/Practice_picture/10.JPG" alt=""> </div> <img class="picture_img" id="last" src="./img/sample_picture/top.png" alt=""> <img class="picture_img" id="last2" src="img/HP-mobile.png" alt=""> </div>
CSS
@media screen and (min-width: 1024px){ body { width:100%; } #last { opacity:1; width:100%; } #last2 { opacity:0; } #top_all_work { width:100%; margin-top:0; } #picture img { position:fixed; width:100%; display:none; overflow:hidden; background-size:100% 100%; } } @media screen and (min-width: 480px) and (max-width: 1024px){ body { width:100%; } #last { opacity:1; width:100%; } #last2 { opacity:0; } #top_all_work { width:100%; margin-top:0; } .picture_img { position:fixed; width:100%; display:none; overflow:hidden; background-size:100% 100%; } #picture img { position:fixed; width:100%; display:none; overflow:hidden; background-size:100% 100%; } } @media screen and (min-width: 0px) and (max-width: 480px) { #picture img { position:fixed; width:100%; display:none; overflow:hidden; background-size:100% 100%; } #top_all_work { width:100%; margin-top:0; } .picture_img { position:fixed; width:100%; display:none; overflow:hidden; background-size:100% 100%; } body { width:100%; } #last { opacity:0; } #last2 { width:100%; opacity:1; } }
JS
$(window).load(function(){ $("#1").css("z-index",1); $("#2").css("z-index",2); $("#3").css("z-index",3); $("#4").css("z-index",4); $("#5").css("z-index",5); $("#6").css("z-index",6); $("#7").css("z-index",7); $("#8").css("z-index",8); $("#9").css("z-index",9); $("#10").css("z-index",10); $("#particles-js").css("z-index",13); $("#last").css("z-index",11); $("#last2").css("z-index",11); $("#1").fadeIn(600); setTimeout(function(){ $('#2').fadeIn(150); },650); setTimeout(function(){ $('#3').fadeIn(150); },850); setTimeout(function(){ $('#4').fadeIn(150); },1050); setTimeout(function(){ $('#5').fadeIn(150); },1250); setTimeout(function(){ $('#6').fadeIn(150); },1450); setTimeout(function(){ $('#7').fadeIn(150); },1750); setTimeout(function(){ $('#8').fadeIn(150); },1950); setTimeout(function(){ $('#9').fadeIn(150); },2150); setTimeout(function(){ $('#10').fadeIn(150); },2350); setTimeout(function(){ $('#1,#2,#3,#4,#5,#6,#7,#8,#9,#10').fadeTo("10",0); },2550); setTimeout(function(){ $('#1,#2,#3,#4,#5,#6,#7,#8,#9,#10').hide(); $('#last').fadeTo(2000,1).animate({width:'100%',},1); $('#last2').fadeTo(2000,1).animate({width:'100%',},1); },3550); });
という感じのコードになりまして、一枚一枚画像が表示されたら、最後に一枚表示されるみたいなプログラムになります。
そこでなのですが、スマホをもし縦に持った際、widthを100%にしているため、縮小してくれるかと思いきや、横向きの縮尺から変化しません。これが問題点です。
そして、CSSのwidthを使い表示非表示にしようとやってみますが、あいにくpositionの指定についてはすべての画像にfixedをつけないといけないため、display:noneが使用不可です。
なにか、いい解決方法はないでしょうか。
回答1件
あなたの回答
tips
プレビュー