H5页面自动适应横竖屏

html-css08

H5页面自动适应横竖屏,第1张

对于样式： 通过html标签可强制移动端浏览器横屏或竖屏但兼容性较差，目前仅有： UC强制竖屏：<meta name="screen-orientation" content="portaint"> QQ强制竖屏：<meta name="screen-orientation" content="landscape"> 通过HTML标签media识别横屏和竖屏,分别引用不同的css： 竖屏： <link rel="stylesheet" media="all and (orientation:portrait" href="portrait.css"> 竖屏： <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 通过css媒体查询判断横竖屏，并分别指定样式： @media screen and (orientation: portrait) { //竖屏  CSS } @media screen and (orientation: landscape) { //横CSS }对于事件：通过onorientationchange事件或resize事件监听手机的横竖屏，分别指定对应的事件。强制通过页面 禁止app或手机的横竖屏的切换是不现实的，H5只能针对自身页面做适配！！！

一个是媒体查询，但是这个只能判断尺寸，并不能判断是不是移动设备。

再用就是使用js控制

    /**

     * 判断是够是pc设备

     */

    function IsPC() {

        var userAgentInfo = navigator.userAgent

        var Agents = ["Android", "iPhone","SymbianOS", "Windows Phone", "iPod"]

        var flag = true

        for (var v = 0 v < Agents.length v++) {

            if (userAgentInfo.indexOf(Agents[v]) > 0) {

                flag = false

                break

            }

        }

        if(window.screen.width>=768){

             flag = true

        }

        return flag

    }