css判断是否是电脑还是移动设备

html-css046

css判断是否是电脑还是移动设备,第1张

本文实例讲述了javascript判断移动端访问设备并解析对应CSS的方法。分享给大家供大家参考。具体分析如下： javascript判断不同web访问环境，主要针对移动设备，提供相对应的解析方案（判断设备代码直接copy腾讯网的）： 复制代码 代码如下:// 判断是否为移动端运行环境 if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) (/MIDPSymbianOSNOKIASAMSUNGLGNECTCLAlcatelBIRDDBTELDopodPHILIPSHAIERLENOVOMOT-NokiaSonyEricssonSIE-AmoiZTE/.test(navigator.userAgent))){ if(window.location.href.indexOf("?mobile")<0){ try{ if(/AndroidwebOSiPhoneiPodBlackBerry/i.test(navigator.userAgent)){ // 判断访问环境是 AndroidwebOSiPhoneiPodBlackBerry 则加载以下样式 setActiveStyleSheet("style_mobile_a.css") } else if(/iPad/i.test(navigator.userAgent)){ // 判断访问环境是 iPad 则加载以下样式 setActiveStyleSheet("style_mobile_iPad.css") } else{ // 判断访问环境是 其他移动设备 则加载以下样式 setActiveStyleSheet("style_mobile_other.css") } } catch(e){} } } else{ // 如果以上都不是，则加载以下样式 setActiveStyleSheet("style_mobile_no.css") } // 判断完毕后加载样式 function setActiveStyleSheet(filename){document.write("＜link href="+filename+" rel=stylesheet＞")} 加载页面： 复制代码 代码如下:<script type="text/javascript"> if(/AppleWebKit.*mobile/i.test(navigator.userAgent) (/MIDPSymbianOSNOKIASAMSUNGLGNECTCLAlcatelBIRDDBTELDopodPHILIPSHAIERLENOVOMOT-NokiaSonyEricssonSIE-AmoiZTE/.test(navigator.userAgent))){ if(window.location.href.indexOf("?mobile")<0){ try{ if(/AndroidwebOSiPhoneiPodBlackBerry/i.test(navigator.userAgent)){ window.location.href="手机页面" }else if(/iPad/i.test(navigator.userAgent)){ window.location.href="平板页面" }else{ window.location.href="其他移动端页面" } }catch(e){} } } </script> 希望本文所述对大家的javascript程序设计有所帮助。

css只能通过媒体查询判断屏幕大小比例等，而无法判断设备类型。而SASS作为“css预处理器”，显然也不存在这类功能。

可以准备两套css，用js通过UA来判断设备类型再动态的加载不同的css。

检测UA。

function loadCSS() {

    if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {

        document.write('<link href="css/notpc.css" rel="stylesheet" type="text/css" media="screen" />')

    }

    else {

        document.write('<link href="css/pc.css" rel="stylesheet" type="text/css" media="screen" />')

    }

}

loadCSS()

把里面手机部分关键字删除。还有种办法就是判断屏幕宽度。