携帯電話でページを強制する方法

まずhtmlの内容を準備します.

  <div id="content">
    <p>  html5     。。。p>
    <p>      。。。p>
    <p>   。。。p>
    <p>  。。。p>
    <p> 。。。p>
    <p>       。<img src="http://img001.photo.21cn.com/photos/album/20120904/o/6A7A403C29766CBCB38C616BDFD48486.jpg" />p>
  div>

実は原理は簡単で、内容を右に90度回転させるだけで横画面になるのでしょう.まず、位置をabsoluteに変更します.

    #content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    #content p {
      margin: auto;
      margin-top: 20px;
      text-align: center;
    }
    img {
      width: 100px;
    }

実はposition: absolute;という行のコード以外は必要ありません.他は中央揃えなどをするためだけです.次にjsで縦スクリーン(portrait)か横スクリーン(landscape)かを判断し、縦スクリーンであれば右に90度回転します.

  const width = document.documentElement.clientWidth;
  const height = document.documentElement.clientHeight;
  if (width < height) {
    console.log(width + " " + height);
    const contentDOM = document.getElementById('content');
    contentDOM.style.width = height + 'px';
    contentDOM.style.height = width + 'px';
    contentDOM.style.top = (height - width) / 2 + 'px';
    contentDOM.style.left = 0 - (height - width) / 2 + 'px';
    contentDOM.style.transform = 'rotate(90deg)';
  }

しかし、ユーザーの画面が回転してボタンが開いていて、ユーザーが携帯電話を横にすると、悲劇的になります.以下の図です. 
スクリーンの変化を監視する必要があります.ユーザーが自分でスクリーンを横にすると、前の回転を削除します.

  const evt = "onorientationchange" in window ? "orientationchange" : "resize";
  window.addEventListener(evt, function () {
    const width = document.documentElement.clientWidth;
    const height = document.documentElement.clientHeight;
    const contentDOM = document.getElementById('content');
    alert('width: ' + width + ' height: ' + height)
    if (width > height) { //   
      contentDOM.style.width = width + 'px';
      contentDOM.style.height = height + 'px';
      contentDOM.style.top = '0px';
      contentDOM.style.left = '0px';
      contentDOM.style.transform = 'none';
    }
    else { //   ，       bug，         ，width:375, height: 323,         。  safari、chrome     。
      alert('change to portrait')
      contentDOM.style.width = height + 'px';
      contentDOM.style.height = width + 'px';
      contentDOM.style.top = (height - width) / 2 + 'px';
      contentDOM.style.left = 0 - (height - width) / 2 + 'px';
      contentDOM.style.transform = 'rotate(90deg)';
    }

  }, false);

完全なデモはこちらをご覧ください.