如何根据浏览器对CSS属性的支持与否,加载不同的CSS样式

最近在学习如何适配移动端,请大神解答一下?

问题一
请问类似UC浏览器不支持VH,VW,flex布局的wrap,calc这些属性,但是其他移动端浏览器都支持,而我需要用到flex布局的wrap,如何能够实现uc浏览器加载一套CSS代码,其他浏览器加载一套代码? 
uc浏览器连@support都不支持,好像只能用JS来写.
有这方面的文章吗?网上找到的都是
<!--[if lt IE 7]>  
<!--[if lte IE 6]>针对IE的.

问题二
我看了一号店的图片是webp格式,但是ios是不支持Webp格式的图片的.请问怎么实现不同浏览器加载不同路径的图片?这个是前端来做还是后端来做?
有这方面的文章吗? 网上没找到~ 

问题三
在浏览器输入百度,1号店,是跳转到m.baidu.com m.yhd.com而在桌面端是跳转到www.baidu.com 这样是怎么做到的?是前端来实现还是后端实现?
有这方面的文章吗?    
谢谢各位大神
阅读 6.5k
3 个回答
  1. 关于兼容:

    • 你需要知道你所用的属性在什么平台上可用, 可以在 http://caniuse.com/ 里查询;

    • 针对无法兼容的情况(比如UC里面不能用 flex-wrap)可能就需要用别的替代方案了;

    • 向下兼容(比如加前缀等)可以用自动化工具, 如 autoprefixer 等;

  2. 关于浏览器判断:

    • 判断UserAgent, 后端前端都可以做, 根据UA来响应

    • 判断设备特性, 比如利用Canvas是否支持Webp来确定当前设备是否可用Webp

  3. 判断UA, 同上


回答评论区问题:

将判断的 JS 放在 head 里, 校验好设备后, 立即在 head 里追加一个 link[rel=stylesheet] 节点或修改已有的 href 属性

<head>
    <meta charset="utf-8">
    <title>Test</title>
    <script>
        !function() {
            var isUC = /ucbrowser/i.test(navigator.userAgent);
            var link;
            if(isUC) {
                link = document.createElement('link');
                link.setAttribute('rel', 'stylesheet');
                link.setAttribute('href', 'uc.css');
                document.head.appendChild(link);
            }
        }();
    </script>
</head>

问题一
这个或许只能用 JS 判断 UA 动态加载不同的样式表
问题二
我看了一下1号店的网站
使用 chrome 浏览时图片后缀是 webp
使用 safari 浏览时图片后缀是 jpg
但是图片路径和文件名都是一致的,所以我认为后端模版是根据请求头 User-Agent 去判断浏览器类型,
根据类型使用不同的(图片)后缀。浏览器 UA 前端可使用 navigator.userAgent 获取
问题三
同样是后端根据请求头 User-Agent 去判断浏览器类型,
如果是手机浏览器则重定向手机网页地址 http://m.xxx.com
如何证实这一点?
请使用新版 chrome 浏览器,检查元素(开发人员工具),左上角 Toggle device toolbar 按钮
切换到响应式布局,UA 选择 iPhone 6,访问百度查看。

总结: navigator.userAgent

大家好,我的问题是我已经知道我要用别的替代方案了,但是是如何针对不同的useragent实现不同css,
这点我不懂.
比如说正常浏览器我用flex,uc我用inline-block
这样不同的css 我要写成两套css文件吗?
如果要写成两套css文件,我在<link>标签写哪个css文件?
加载网页的时候,不是先加载的页面再执行js吗?
前端判断useragent,那我一开始的css是加载哪个?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题