2017-03-09 1st

japan.deep

License: MIT License

Fork
0
Fav
0
View
227
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 0 lines
  • HTML 11 lines
  • CSS 58 lines
高さが可変のiframe
スマホでも幅に合わせて縦横比率を変えずに縮小・拡大表示

iframe自体はポジション指定(top:0;left:0;)して、幅と高さは100%指定。
iframeの外側のdivは高さが0になってしまうので、paddingで高さを取る。
高さは以下の計算で、幅に対する高さを%で算出。
 高さ ÷ 幅 × 100%

なので便利な計算CSS【calc】で下記のように書くと高さが可変になる。
 padding-top: calc(500 / 640 * 100%) ;

背景画像ぴったりに高さを入れたい場合や、Youtubeを入れるときにも使えるので便利。
  • 2017-03-09 1st
  • 2017-03-09 1st

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

japan.deep

Author

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags