Question

html5怎么实现在不同设备上都正常显示。详情看问题补充。

一个网页，在不同尺寸屏幕上都显示正常，不会改变用户体验。这怎么实现。例如不同尺寸的电脑，不同尺寸的移动设备。之前想用meta实现，可是meta实现的是根据当前页面可视大小来调用不同CSS，而电脑的浏览器可以随便改变。到设定的值时就调用别的CSS去了。电脑上一个网页怎么可能会变呢。还有判断移动设备的横屏竖屏。
我的代码是
<link rel="stylesheet" href="css/an.css" media="screen">
<link rel="stylesheet" href="css/pc.css" media="screen and (min-width: 450px)">
再在an。css里做横竖屏判断用不同样式。可是当设备横屏时大于450PX，直接调用PC。css去了。
我真是一点思路都没有了。怎么做啊

Answer 1

仅仅凭分辨率来判断浏览器是片面的，比如现在很多手机分辨率都达到2k水准了。
建议你使用js判断客户端类型，然后在用js加载css。

追问

请问怎么用JS加载CSS啊，能发下具体代码吗？谢谢

追答

function loadjscssfile(filename,filetype){

    if(filetype == "js"){
        var fileref = document.createElement('script');
        fileref.setAttribute("type","text/javascript");
        fileref.setAttribute("src",filename);
    }else if(filetype == "css"){
    
        var fileref = document.createElement('link');
        fileref.setAttribute("rel","stylesheet");
        fileref.setAttribute("type","text/css");
        fileref.setAttribute("href",filename);
    }
   if(typeof fileref != "undefined"){
        document.getElementsByTagName("head")[0].appendChild(fileref);
    }
    
}
loadjscssfile("do.js","js");
loadjscssfile("test.css","css");