移动端响应式样式判断与响应式样式

最新推荐文章于 2023-02-27 08:30:27 发布

weixin_30414245

最新推荐文章于 2023-02-27 08:30:27 发布

阅读量332

点赞数

文章标签：移动开发 javascript 操作系统 ViewUI

原文链接：http://www.cnblogs.com/hcfinal/p/9177618.html

版权

移动端的响应式(在页面中加入这段js可以让在pc上显示的样式用手机访问的话css样式自动适应)

第一种方法：

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            clientWidth=(clientWidth>640)?640:clientWidth;
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

第二种方法：

function resi() {
    var html = document.querySelector("html");
    var wW = document.body.clientWidth || document.documentElement.clientWidth;
    var maxW = 640;
    var minW = 320;
    if (wW > maxW) wW = maxW;
    var ratio = wW / minW;
    html.style.fontSize = 50 * ratio + "px";


}
window.addEventListener("DOMContentLoaded", 
function() {
    var bodys = document.querySelector("body").style;
    bodys.opacity = "1";
    bodys.filter = "alpha(opacity=100)";
    resi()
});
window.addEventListener("resize", resi);

pc端编写响应式css样式

@media screen and (min-width:320px) and (max-width:359px){}
@media screen and (min-width:360px) and (max-width:409px){}
@media screen and (min-width:410px) and (max-width:639px){}

js对设备的判断（在pc页面加入这段代码用手机访问的话会跳转到指定的网站）

第一种方法：

var browser = {
    versions: function() {
var u = navigator.userAgent,
            app = navigator.appVersion;
return { //移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1,
//IE内核
presto: u.indexOf('Presto') > -1,
//opera内核
webKit: u.indexOf('AppleWebKit') > -1,
//苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
//火狐内核
mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/),
//是否为移动终端
ios: !! u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
//ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
//android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,
//是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1,
//是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
};
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
var hc53 = document.getElementsByClassName('hc53')[0];
    hc53.style.display= "block";
//        window.location = "http://m.wanho.org/";
} else if (browser.versions.android) {
var hc53 = document.getElementsByClassName('hc53')[0];
    hc53.style.display= "block";
//        window.location = "https://m.baidu.com/";
}

第二种方法：

function uaredirect(f){try{if(document.getElementById("bdmark")!=null){return}var b=false;if(arguments[1]){var e=window.location.host;var a=window.location.href;if(isSubdomain(arguments[1],e)==1){f=f+"/#m/"+a;b=true}else{if(isSubdomain(arguments[1],e)==2){f=f+"/#m/"+a;b=true}else{f=a;b=false}}}else{b=true}if(b){var c=window.location.hash;if(!c.match("fromapp")){if((navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i))){location.replace(f)}}}}catch(d){}}function isSubdomain(c,d){this.getdomain=function(f){var e=f.indexOf("://");if(e>0){var h=f.substr(e+3)}else{var h=f}var g=/^www\./;if(g.test(h)){h=h.substr(4)}return h};if(c==d){return 1}else{var c=this.getdomain(c);var b=this.getdomain(d);if(c==b){return 1}else{c=c.replace(".","\\.");var a=new RegExp("\\."+c+"$");if(b.match(a)){return 2}else{return 0}}}};

把上面的js复制下来保存为uaredirect.js 然后在要跳转的页面的head头部加上下面的两个script标签。

<script src="网站js存放目录/uaredirect.js" type="text/javascript"></script>
<script type="text/javascript">uaredirect("http://m.wanho.org/");</script>

转载于:https://www.cnblogs.com/hcfinal/p/9177618.html