More than 3 years have passed since last update.

PCとスマホ（縦向き）とスマホ（横向き）でレイアウト変える

Posted at 2020-06-11

ＰＣブラウザで見る場合と、スマホで見る場合（縦横の判別）でレイアウトを変えようと試行錯誤（ググった）結果です
※javascriptが苦手なのでCSSのメディアクエリでやれました。
htmlとかあんまり得意でないので的外れ感(CSS全部中に書いてしまったり、、)あるかもしれません。。。

スマホ横向き・ＰＣだとコンテンツ横並び、スマホ縦向きだと縦並びにしています

test.html

<html>
<head>
 <meta name=viewpoint content="width=device-width,height=device-hight,user-scalable=no,inital-scale=1,maximam-scale=1">
 <style>
  @media screen and (max-width:750px) , (orientation:portrait){
<!--こちらにスマホ縦向き用のＣＳＳを書きます -->
   body{
       -webkit-text-size-adjust:100%;
   }
   .outside{
     display:block;
     width:100%;
     height:100%;
   }
   .outside .inside{
     display:block;
     width:100%;
     hight:50%;
     padding-right:0;
     padding-left:0;
     overflow:hidden;
   }
}
  @media screen and (min-width:900px) , (orientation:landscape){
<!--こちらにスマホ横向き・ＰＣ用のＣＳＳを書きます -->
   body{
       -webkit-text-size-adjust:100%;
   }
   .outside{
     display:table;
     width:100%;
     height:100%;
   }
   .outside .inside{
     display:table-cell;
     vertical-align:middle;
     width:50%;
     hight:100%;
     padding-right:0;
     padding-left:0;
     overflow:hidden;
   }

 }
 </style>
</head>
<body>
 <div class=outside>
 <div class=inside><iframe src="****1" scrolling=no frameborder="0" width=100% height=100%></iframe></div>
 <div class=inside><iframe src="****2" scrolling=no frameborder="0" width=100% height=100%></iframe></div>
 </div>
</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up