欢迎光临
我们一直在努力

JS判断移动端,PC端,ios终端, android终端,Iphone,IPad等

admin阅读(9)

测试程序代码

var browser = {
    versions: function() {
        var u = navigator.userAgent;
        return {
            trident: u.indexOf('Trident') > -1,
            presto: u.indexOf('Presto') > -1,
            webKit: u.indexOf('AppleWebKit') > -1,
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
            mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0,
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
            iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,
            iPad: u.indexOf('iPad') > -1,
            webApp: u.indexOf('Safari') == -1
        }
    } (),
    language:(navigator.browserLanguage || navigator.language).toLowerCase()
};


document.writeln("语言版本: "+browser.language+"</br>");
document.writeln(" 是否为移动终端: "+browser.versions.mobile+"</br>");
document.writeln(" ios终端: "+browser.versions.ios+"</br>");
document.writeln(" android终端: "+browser.versions.android+"</br>");
document.writeln(" 是否为iPhone: "+browser.versions.iPhone+"</br>");
document.writeln(" 是否iPad: "+browser.versions.iPad+"</br>");
document.writeln(navigator.userAgent+"</br>");

完整版,运用于项目代码

/*
*
* 判断PC端与WAP端
*/
var mobile_bs = {
    versions: function() {
        var u = navigator.userAgent;
        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/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0,  //是否为移动终端
            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应该程序,没有头部与底部
        }
    } ()
};

if (mobile_bs.versions.mobile) {
    if (mobile_bs.versions.android || mobile_bs.versions.iPhone || mobile_bs.versions.iPad || mobile_bs.versions.ios) {
        window.location.href = "你的网站";
    }
};

可以通过if不同条件来进行各种不同的判断

js获取宽度 ,各种高度宽度document.body.clientWidth , document.body.clientHeight,window.screen.width 等等

admin阅读(19)

为方便我们了解各种屏幕宽高,JS获取方法如下

网页可见区域宽: document.body.clientWidth

网页可见区域高: document.body.clientHeight

网页可见区域宽: document.body.offsetWidth (包括边线的宽)

网页可见区域高: document.body.offsetHeight (包括边线的高)

网页正文全文宽: document.body.scrollWidth

网页正文全文高: document.body.scrollHeight

网页被卷去的高: document.body.scrollTop

网页被卷去的左: document.body.scrollLeft

网页正文部分上: window.screenTop

网页正文部分左: window.screenLeft

屏幕分辨率的高: window.screen.height

屏幕分辨率的宽: window.screen.width

屏幕可用工作区高度: window.screen.availHeight

屏幕可用工作区宽度: window.screen.availWidth

function screenInfo(){
   var  s = "";
   s += "\r\n网页可见区域宽:"+ document.body.clientWidth;
   s += "\r\n网页可见区域高:"+ document.body.clientHeight;
   s += "\r\n网页可见区域宽:"+ document.body.offsetWidth  +" (包括边线的宽)";
   s += "\r\n网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";
   s += "\r\n网页正文全文宽:"+ document.body.scrollWidth;
   s += "\r\n网页正文全文高:"+ document.body.scrollHeight;
   s += "\r\n网页被卷去的高:"+ document.body.scrollTop;
   s += "\r\n网页被卷去的左:"+ document.body.scrollLeft;
   s += "\r\n网页正文部分上:"+ window.screenTop;
   s += "\r\n网页正文部分左:"+ window.screenLeft;
   s += "\r\n屏幕分辨率的高:"+ window.screen.height;
   s += "\r\n屏幕分辨率的宽:"+ window.screen.width;
   s += "\r\n屏幕可用工作区高度:"+ window.screen.availHeight;
   s += "\r\n屏幕可用工作区宽度:"+ window.screen.availWidth;
   alert(s);

解决ios微信端失焦键盘隐藏后,被顶起的页面不回弹问题

admin阅读(17)

问题:测试发现ios微信端浏览器中,input失焦后,因软键盘顶起的页面没有回弹到原来位置,需手动滑动一下页面才可以恢复;android端没有发现这个问题
解决方法:当失焦后,页面自动滚动到原来位置

$('input,textarea').on('blur', function() {
    var ua = navigator.userAgent.toLowerCase();
    if(/micromessenger/.test(ua)) {
        if(/iphone|ipad|ipod/.test(ua)) {
            var currentPosition, timer;
            var speed = 1; 
            timer = setInterval(function() {
                currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
                currentPosition-=speed;
                window.scrollTo(0,currentPosition);
                currentPosition+=speed; 
                window.scrollTo(0,currentPosition);
                clearInterval(timer);
            }, 1);
        }
    }
});
Vue.js中
Vue.directive('iosbugscroll', {
  inserted: function(el, binding, vnode) {
    var ua = navigator.userAgent.toLowerCase();
    if(/micromessenger/.test(ua)) {
      if(/iphone|ipad|ipod/.test(ua)) {
        // input、textarea被组件包装的场景
        const childInput = el.getElementsByTagName('input');
        const childTextarea = el.getElementsByTagName('textarea');
        for (let i = 0; i < childInput.length; i++) { 
          childInput[i].onblur = function temporaryRepair() {
            setTimeout(function() {
              checkWxScroll();
            }, 200);
          };
        }
       
        for (let i = 0; i < childTextarea.length; i++) {
          childSelect[i].onblur = function temporaryRepair() {
            setTimeout(function() {
              checkWxScroll();
            }, 200);
          };
        }
        // input、textarea中的场景
        el.onblur = function temporaryRepair() {
          setTimeout(function() {
            checkWxScroll();
          }, 200);
        };
      }
    }
  }
});

function checkWxScroll() {
  var currentPosition, timer;
  var speed = 1; 
  timer = setInterval(function() {
    currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
    currentPosition-=speed;
    window.scrollTo(0,currentPosition);
    currentPosition+=speed; 
    window.scrollTo(0,currentPosition);
    clearInterval(timer);
  }, 1);
}

使用时

<input  type="text" v-iosbugscroll />

苹果手机各种尺寸详细表以及iPhoneX、iPhoneXS、iPhoneXR、iPhoneXSMax屏幕适配-持续更新

admin阅读(34)

 iPhone设备

物理分辨率是硬件所支持的,逻辑分辨率是软件可以达到的。

代数 设备 操作系统 逻辑分辨率(point) 物理分辨率(pixel) 微信可见区域 浏览器可见区域 屏幕尺寸
(对角线长度)
缩放因子
  iPhone              
第一代 iPhone 2G iOS 1 320 x 480 320 x 480     3.5寸 1x
第二代 iPhone 3 iOS 2 320 x 480 480 x 320     3.5寸 1x
第三代 iPhone 3GS iOS 3 320 x 480 480 x 320     3.5寸 1x
第四代 iPhone 4 iOS 4 320 x 480 640 × 960     3.5寸 2x
第五代 iPhone 4S iOS 5 320 x 480 640 × 960 320 x 504   3.5寸 2x
第六代 iPhone 5 iOS 6 320 x 568 640 x 1136 414 x 672   4.0寸 2x
第七代 iPhone 5S/5C iOS 7 320 x 568 1136 x 640     4.0寸 2x
第八代 iPhone 6 iOS 8 375 x 667 1334 x 750     4.7寸 2x
第八代 iPhone 6 Plus iOS 8 414 x 736 2208 x 1242 (1920×1080)     5.5寸 3x
第九代 iPhone 6S iOS 9 375 x 667 1334 x 750     4.7寸 2x
第九代 iPhone 6S Plus iOS 9 414 x 736 2208 x 1242 (1920×1080)     5.5寸 3x
  iPhone SE iOS 9 320 x 568 1136 x 640     4寸 2x
第十代 iPhone 7 iOS 10 375 x 667 1334 x 750     4.7寸 2x
第十代 iPhone 7 Plus iOS 10 414 x 736 2208 x 1242 (1920×1080)     5.5寸 3x
第十一代 iPhone 8 iOS 11 375 x 667 1334 x 750     4.7寸 2x
第十一代 iPhone 8 Plus iOS 11 414 x 736 2208 x 1242 (1920×1080)     5.5寸 3x
第十一代 iPhone X iOS 11 375 x 812 2436 × 1125     5.8寸 3x

wordpress更换域名的几个步骤

admin阅读(170)

问题缘由

这是自己亲自遇到的一个问题,也是大家会遇到的一个问题,wordpress要换域名这么办?后台的设置-常规里修改里域名后,全站打不开了,这是为什么?这么办?

问题解说

其实wordpress换域名需要到数据库进行操作的,首先,来分析一下换域名的几种常见情况;

一、换空间换域名

1、如果是上述问题,打包备份旧空间ftp内的所有文件,进旧站数据库phpmyadmin里导出你网站的数据库sql文件;

2、将备份的ftp所有文件上传至新的空间FTP内,将备份的sql上传到新空间的数据库phpmyadmin内;

3、打开新空间ftp的网站根目录找到wp-config.php文件,编辑它(php文件不要用txt去编辑),进行编辑配置新的数据库连接信息;

4、去新的空间的数据库phpmyadmin里,做sql批量换域名处理(详见下面教程二)

二、仅换域名,没有换空间

打开新空间的phpmyadmin(数据库控制面板)

然后选择新的数据库名,点击后,进入wp_开头的大于等于11个的表,然后选择选项卡里的sql,如下图,或者使用其他数据库管理软件,比如SQLyog也是可以的。

然后就是进行sql批量处理的命令了:

UPDATE wp_options SET option_value = replace( option_value, 'http://www.old.com', 'http://www.new.com' ) WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET post_content = replace( post_content, 'http://www.old.com', 'http://www.new.com' ) ;
UPDATE wp_posts SET guid = replace( guid, 'http://www.old.com', 'http://www.new.com' ) ;

old代表旧域名、new代表新域名,将上面的执行语句修改为你们自己的,然后点击执行即可!

到这一步,就基本全OK了。

2017/05/20更新:一键更新域名插件

该插件的使用,建议没有代码经验或者连phpmyadmin是什么都不知道的小白用户,用起来超爽的!

作者使用方法二操作,友情提示,操作前先备份所有文件及数据库。

{GO}  点击下载该插件,上传插件,启动插件,去工具-更换域名内进行设置

全部设置后,提示更换成功后,切勿以为一切已经结束,还需要到WP后台-设置-常规里 将WordPress地址和站点地址换成您的新域名网址即可!!

btn1,btn2

大前端WP主题 更专业 更方便

联系我们联系我们