javascript - 如何根据浏览器对CSS属性的支持与否,加载不同的CSS样式-PHP中文网问答

最近在学习如何适配移动端,请大神解答一下?
问题一
请问类似UC浏览器不支持VH,VW,flex布局的wrap,calc这些属性,但是其他移动端浏览器都支持,而我需要用到flex布局的wrap,如何能够实现uc浏览器加载一套CSS代码,其他浏览器加载一套代码? 
uc浏览器连@support都不支持,好像只能用JS来写.
有这方面的文章吗?网上找到的都是

            
            
            
            
            
            
            
            
            
            
            

            
                
                    
                    
                        大家讲道理
                        光阴似箭催人老，日月如移越少年。
                    
                
                
                    
                    
                        
                            
                        
                    
                
            
            
                
                    全部回复(3)
                    
                
                

                                
                    
                    
                        
                            
                                高洛峰2017-04-11 13:15:12
                                3楼
                            
                            

关于兼容:

你需要知道你所用的属性在什么平台上可用, 可以在 http://caniuse.com/ 里查询;
针对无法兼容的情况(比如UC里面不能用 flex-wrap)可能就需要用别的替代方案了;
向下兼容(比如加前缀等)可以用自动化工具, 如 autoprefixer 等;



关于浏览器判断:

判断UserAgent, 后端前端都可以做, 根据UA来响应
判断设备特性, 比如利用Canvas是否支持Webp来确定当前设备是否可用Webp


判断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>
                            
                                 
                                赞 +0
                                
                                    添加回复
                                
                            
                                                            
                                    
                                        
                                            
                                                
                                                大家讲道理
                                            
                                            

                                        
                                        
                                        
                                    
                                
                            
                            
                                
                                    
                                

                            


                        
                    

                
                
                                
                    
                    
                        
                            
                                PHP中文网2017-04-11 13:15:12
                                2楼
                            
                            问题一
这个或许只能用 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
                            
                                 
                                赞 +0
                                
                                    添加回复
                                
                            
                                                            
                                    
                                        
                                            
                                                
                                                大家讲道理
                                            
                                            

                                        
                                        
                                        
                                    
                                
                            
                            
                                
                                    
                                

                            


                        
                    

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