CSSのみでスマホの横向き固定ページ設定

20-04-16 20-04-16

アス比固定版の計算式から冗長部分削除しました
記事公開

スマホの横向き固定ページをCSSのみで設定できるようにしたものです。

別件で入用だったので作成。

source code

基本

HTML


        
	<div id="wrp">内容</div>

CSS


        
	html {
		width: 100vw;
		height: 100vh;
		overflow: hidden auto;
	}
	
	body {
		width: 100vw;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	
	#wrp {
		width:  100vw;
		height: 100vh;
		overflow: auto;
	}
	
	@media screen and (orientation:portrait) {
	
		#wrp {
			width: 100vh;
			height: 100vw;
			margin: -100vw 0 100vh;
			transform: rotate(90deg);
			transform-origin: left bottom;
		}
	
	}

demo

アス比固定

CSS


        
	html {
		width: 100vw;
		height: 100vh;
		overflow: hidden auto;
	}
	
	body {
		width: 100vw;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	
	#wrp {
		--width:  100vw;
		--height: calc( var(--width) / 16 * 9 );
		--margin-base: 50vh;
		--centering: calc( var(--margin-base) - var(--height) / 2 );
		width:  var(--width);
		height: var(--height);
		margin: var(--centering) auto 0;
		overflow: auto;
	}
	
	@media screen and (orientation:portrait) {
	
		#wrp {
			--width: 100vh;
			--margin-base: 50vw;
			margin: calc( var(--height) * -1 ) var(--centering) var(--width);
			transform: rotate(90deg);
			transform-origin: left bottom;
		}
	
	}

アス比固定するならこうかな🤔　上記は16:9。色付き部分の編集だけで反映されるようにしています。

demo

ついでに最大幅指定するならCSS末尾に下記を追加

追加CSS


        
	@media screen and (min-width:800px),(min-height:800px) {
	
		#wrp {	--width: 800px}
	
	}

編集時800px三か所は同値で。

編集について

はお好みで調節してください。

div要素を用いて角度を変更していますが、この傾ける要素一見「bodyでいいのでは🤔」となると思います。

が、androidでの挙動がとにかく安定しなかったのでお勧めしません。(ブラウザによりスクロールできなかったり要素が意図せぬところで非表示になったり)

なにをやってるのか

内容を書いた要素を用意
要素のサイズを下記に
幅　：画面の高さ
高さ：画面の幅
要素の高さ分、上へずらす
青い点を基点に
90度回転
完成