精华内容
下载资源
问答
  • 正好我这里有个需要,同一个域名要根据不同的访问设备显示PC页面或者手机页面,这里收集两个比较简洁的方法,都是通过JS代码实现的。 第一个: <script type="text/javascript"> v...

     

    目前很多网站都是采用了响应式自适应页面的设计了,根据访问设备的不同,显示不同的内容。但是还是会有一些节奏比较慢的网站,还是PC页面和手机PAD页面不同的访问域名。正好我这里有个需要,同一个域名要根据不同的访问设备显示PC页面或者手机页面,这里收集两个比较简洁的方法,都是通过JS代码实现的。

    第一个:

    <script type="text/javascript">
    var userAgent = navigator.userAgent.toLowerCase();
        var platform;
        if(userAgent == null || userAgent == ''){
            platform = 'WEB' ;
        }else{
            if(userAgent.indexOf("android") != -1 ){
                platform = 'ANDROID';
                location.href = "http://m.kuegou.com/";
            }else if(userAgent.indexOf("ios") != -1 || userAgent.indexOf("iphone") != -1 || userAgent.indexOf("ipad") != -1){
                platform = 'IOS';
                location.href = "http://m.kuegou.com/";
            }else if(userAgent.indexOf("windows phone") != -1 ){ 
                platform = 'WP';
                location.href = "http://m.kuegou.com/";
            }else{
                platform = 'WEB' ;
                location.href = "http://www.kuegou.com/";
            }
        }
    </script>
    

      

    第二个:

    这一个是两段代码,分别放到PC页面网页和手机页面网页,实现不同设备访问不同页面都能实现调整,比如电脑访问了手机页面的地址也会跳转到PC页面上来。

    首先是放入PC页面的代码:

    <script type="text/javascript">
    var url = window.location.pathname;
    var wapurl="http://3g.xxx.com"+url
    
    if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
        if(window.location.href.indexOf("?mobile")<0){
            try{
                if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
                     window.location.href=wapurl;
                }else{
                    window.location.href=wapurl;
                }
            }catch(e){}
        }
    }
    </script>
    

      

    下边是放入手机页面的代码:

    <script type="text/javascript">
    
    var url = window.location.pathname;
    var pcurl="http://www.xxx.com"+url
    
    if(/AppleWebKit.*Mobile/i.test(navigator.userAgent)==false || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))==false){
        if(window.location.href.indexOf("?mobile")<0){
            try{
                if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)==false){
                     window.location.href=pcurl;
                }
    
            }catch(e){}
        }
    }
    </script>
    

      

    转载于:https://www.cnblogs.com/Mr-Tao/p/10544790.html

    展开全文
  • 控制pc端和手机端显示不同页面

    千次阅读 2019-09-24 23:29:27
    这里介绍2种方法来控制pc端和手机端显示不同页面 1、使用nginx根据userAgent控制跳转到不同的路径或者不同的域名 set $flag 0; if ( $http_user_agent ~* "(Android|iPhone|Windows Phone|UC|Kindle)" ){ set ...

    这里介绍2种方法来控制pc端和手机端显示不同的页面

    1、使用nginx根据userAgent控制跳转到不同的路径或者不同的域名

    set $flag 0;
    if ( $http_user_agent ~* "(Android|iPhone|Windows Phone|UC|Kindle)" ){
        set $flag "${flag}1";
    }
    if ( $request_uri ~ "^/m/") {
        set $flag "${flag}2";
    }
    if ($flag = "01") {
        rewrite  ^/(.*)$  https://www.test.com/m$uri;
    }

    思路为:根据nginx的 $http_user_agent 变量判断当前是否是手机端,如果是手机端则将 $flag 的值变为 01,如果访问路径为以 /m/ 开头则将变量变成 012 ,最后,如果 $flag 的值为 01(即是手机端,但不是以 /m/ 开头的访问路径),则在路径的后面加上 /m ,实现页面跳转

    2、java后端根据userAgent控制显示不同的view

    @RequestMapping("/test.html")
    public ModelAndView test(@RequestHeader(value="User-Agent") String userAgent) {
        model.setViewName(isMobile(userAgent) ? "mobile/test" : "test");
        return model;
    }
    
    private boolean isMobile(String userAgent) {
        if (!StringUtils.isEmpty(userAgent)) {
            String agent = userAgent.toLowerCase();
            String[] mobileAgents = {"android", "phone", "mobi"};
            for (String mobileAgent : mobileAgents) {
                if (agent.indexOf(mobileAgent) > 0) {
                    return true;
                }
            }
        }
        return false;
    }

    思路也很清楚,根据userAgent判断如果是手机端,则渲染 mobile/test 视图,否则渲染 test 视图

    本文内容到此结束,更多内容可关注公众号:

    展开全文
  • html页面不同手机系统显示会不同

    千次阅读 2018-03-03 13:19:41
    安卓手机判定if(/(Andorid)/i.test(navigator,userAngent)){//内容}//ios手机判定if(/(iPhone)/i.test(navigator,userAngent)){//内容}

    安卓手机判定

    if(/(Andorid)/i.test(navigator,userAngent)){

    //内容

    }

    //ios手机判定

    if(/(iPhone)/i.test(navigator,userAngent)){

    //内容

    }


    展开全文
  • Nginx根据Pc端和手机端访问不同页面

    千次阅读 2018-12-07 13:49:04
    有的时候一个网站需要区别是pc访问的 还是手机访问的,根据平台的不同让他跳转到不同的入口;可以这样实现: server { ### nginx 用来当静态资源的服务器 listen 83; server_name localhost; underscores_in_...
    有的时候一个网站需要区别是pc访问的 还是手机访问的,根据平台的不同让他跳转到不同的入口;可以这样实现:
    
    
       server {
    	### nginx 用来当静态资源的服务器
    	listen       83;
    	server_name localhost;
    	underscores_in_headers on;
    
    
    	# 是手机还是pc
    	set $mobile_rewrite ispc;
    	if ($http_user_agent ~* "(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|ee
    laine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera
    m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vv
    odafone|wap|windows ce|xda|xiino") {
    		set $mobile_rewrite ismobile;
    	}
    
    	 if ($http_user_agent ~* "^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|aa
    i(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq))
    |bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|dd
    a(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|oo
    s|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pp
    t|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig00
    1|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xii
    )|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mii
    (o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50((
    0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pp
    dxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\--
    [2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\\
    -|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )||
    sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tt
    x\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|88
    1|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-)") {
    		set $mobile_rewrite ismobile;
    	}
    	location / {
    				root /home/xxxx;
    				set $myindex pc.html;
    				#如果是手机就让index设置为  h5.html
    				if ($mobile_rewrite = ismobile) {
    		                        set $myindex h5.html;
    		                }
    			        index $myindex;
    		}
    	}
    }
    
    

    参考(http://blog.51cto.com/yanconggod/2047463)

    展开全文
  • JS判断手机操作系统(ios或android)并跳转到不同下载页面 $( function () { var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf( 'Android' ) > - 1 || u.index...
  • nginx配置手机和电脑访问不同页面

    千次阅读 2018-01-25 17:37:22
    #如果是不同的项目目录,就用下面这个,其他的不变 if ( $mobile_rewrite = perform) { root /xxx/xxx/nbfuli.cn/Mobile; } 然后保存,测试一下nginx配置是否正确。 nginx -t 显示successfully的...
  • tp3.2后台判断手机登录还是pc端登录,跳转不同页面
  • 识别pc和手机版跳转不同页面

    千次阅读 2017-04-21 11:20:22
    function browserRedirect(partMent) {  var sUserAgent= navigator.userAgent.toLowerCase();  var bIsIpad= sUserAgent.match(/ipad/i) == "ipad";  var bIsIphoneOs= sUserAgent.match(/iphone os/i) == ...
  • 请求中氛围页面手机版请求useragent不同 网页版 手机
  • 1、同一个网址,不是响应式网址,如何实现手机端和pc端显示不同页面 2、pc页面始终是一个页面样式 3、手机端访问是一个页面样式 已有思路: 1、后台判断访问设备,后台返回相对应的样式,前端js渲染输出 ...
  • function is_mobile() {  // getallheaders();//如果是apache可以直接用这个函数获得请求头 ...  $is_pc = (strpos($agent, 'windows ...BIND_MODULE是控制绑定模块的,就是说,输入同样的网址IP,访问不同的模块用的!
  • 可以使用jsp定制活动页面,使用css样式适配不同终端的屏幕大小。 二,css适配样式  css适配样式如下: //适配手机屏幕宽度&lt;=330px的手机 @media screen and (max-width:330px) { body { font-size: 32...
  • 前端手机页面的适配css

    千次阅读 2018-05-23 21:55:43
    我之前一直不知道同一个网页,手机页面和PC页面,怎么呈现出不同的效果呢?这个不同,不是说放大缩小的那种不同,而是布局就不同了。今天我百度了下,看到了解惑的CSS代码@media only screen and (max-width: 767px)...
  • window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? "https://www.baidu.com/" : "...;if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigato...
  • 动态计算dpr 和根元素的fontsize,适配不同分辨率不同设备的移动前端开发
  • js判断用户使用媒体,并跳转不同下载界面
  • 移动互联网发展迅速,各种APP的开发都太疯狂了,一般稍大点儿的应用,都会准备多个版本,比如:iPhone版、iPad版、...还有更拽的,针对不同渠道(流量来源)也提供不同的版本,比如:百度版、Google版、阿里版、腾
  • ...  //正则表达式,批配不同手机浏览器UA关键词。  $regex_match="/(nokia|iphone|android|motorola|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|";  $regex_match.="htc|dop
  • 如何调试手机网页页面

    千次阅读 2017-06-27 09:24:53
    所以在制作网站的过程中对于手机页面的开发和调试显得越来越重要了。下面就介绍一下手机页面的调试方法。 利用chrome模拟进行调试 如果你在使用chrome浏览器,那么就可以利用其自带的模拟功能进行调试。 开启...
  • 在《【JavaScript】通过JavaScript的方式,如果手机浏览器访问PC版页面,自动跳转到手机页面》(点击打开链接)中现实了,如果用户通过手机访问你的PC页面,自动跳转到手机页面,但是,这其中有一个问题,如果...
  • 要能模拟安卓和ios的,找了很多,opear mobile emulator和User-Agent Switcher for Chrome 汉化版 1.0.34都不好用

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 164,535
精华内容 65,814
关键字:

不同手机的页面是怎样的