css判断是手机还是电脑横竖屏

html-css012

css判断是手机还是电脑横竖屏,第1张

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

再用就是使用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

    }

css具有媒体响应功能，可以判断屏幕宽度，从而加载设置的css

如下代码，当宽度小于1000px的时候加载css下的css-mobile.css

<link href="css/css-mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width: 1000px)">

如下代码，当宽度大于1000px的时候加载css下的css-pc.css

<link href="css/css-pc.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)">