精华内容
下载资源
问答
  • 不同手机的页面是怎样的
    2020-12-08 16:22:25

    要求:

    有时候我们移动端和客户端的首页因为布局问题所以是分开写的,所以下面js代码能实现判断移动端(手机)还是客户端(电脑)打开网页并跳转不同页面。

    实现 js代码:

     <script>
     if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
        window.location.href = "shouji.html";
    } else {
      window.location.href = "zaixian.html";
    }
    </script>
    

    注意:
    window.location.href = " 这里是手机打开网页跳转到的首页的html文件 ";
    window.location.href = “这里是电脑打开网页跳转到的首页的html文件”;
    js代码可以写在body标签底部;

    更多相关内容
  • js识别手机系统是苹果还是安卓的,以便跳转不同的url路径
  • 手机新闻客户端不同页面设计下用户视觉浏览规律研究.pdf
  • 二、Js created(){ if (this._isMobile()) { //手机端 this.ismOrpc = 'Moperation' //设置rem window.onload = function(){ getRem(750,100) }; window.onresize = function(){ getRem(750,100) }; function ...

    一、html

    <div class="container">
      <template v-if="ismOrpc == 'PCoperation'">
         <basic-info></basic-info>
       </template>
       <template v-else>
         <mo-basic-info></mo-basic-info>
       </template>
     </div>
    

    设置标志位ismOrpc,如果ismOrpc 为PCoperation代表当前是PC端,显示对应的组件,否则显示手机端的组件。

    二、Js

      created(){
          if (this._isMobile()) {
            //手机端
            this.ismOrpc = 'Moperation'
            //设置rem
            window.onload = function(){
              getRem(750,100)
            };
            window.onresize = function(){
              getRem(750,100)
            };
            function getRem(pwidth,prem){
              var html = document.getElementsByTagName("html")[0];
              var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
              html.style.fontSize = oWidth/pwidth*prem + "px";
            }
    
          } else {
            //pc端
            this.ismOrpc = 'PCoperation'
          }
        },
        methods: {
          //判断手机端还是PC端
          _isMobile() {
            let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
            return flag;
          }
        },
    

    注:navigator.userAgent可以获取浏览器信息(类型及系统)

    欢迎各位大佬指正批评~~~

    展开全文
  • 控制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 视图

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

    展开全文
  • 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)

    展开全文
  • function is_mobile() {  // getallheaders();//如果是apache可以直接用这个函数获得请求头 ...  $is_pc = (strpos($agent, 'windows ...BIND_MODULE是控制绑定模块的,就是说,输入同样的网址IP,访问不同的模块用的!
  • 手机页面尺寸设置的一些方法HTML5

    千次阅读 2021-06-10 17:07:57
    手机页面尺寸设置的一些方法HTML5参考:http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/一、网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的...
  • 同一个网站,手机端跟电脑端不同怎么实现的?常见的方式有三种:1,自适应网站同一套代码,自动实现手机端和电脑端的布局自动调整。例如:openGPS.cn网站现在大部分页面已经支持自适应展示,手机端电脑端都可以...
  • 手机端兼职工作页面wap模板,有四个下拉分类,分别按不同方式进行搜索
  • 识别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) == ...
  • 在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块主要有四个方法可以适用。这篇文章主要介绍了vue移动端h5页面根据屏幕适配的四种方案 ,需要的朋友可以参考下
  • 1、同一个网址,不是响应式网址,如何实现手机端和pc端显示不同页面 2、pc页面始终是一个页面样式 3、手机端访问是一个页面样式 已有思路: 1、后台判断访问设备,后台返回相对应的样式,前端js渲染输出 ...
  • 请求中氛围页面手机版请求useragent不同 网页版 手机
  • 判断当前设备是手机端或者pc端,根据设备展示页面 在项目中经常会遇到支持 pc 与手机端的需求。但是 pc 端和手机端尺寸差距很大,一个文件很难实现这种需求。 这个时候就需要判断当前的设备,根据设备来跳转不同的...
  • 怎么把一个pc页面自适应手机屏幕

    千次阅读 2021-08-04 09:37:18
    无论是电脑还是手机,要做到自适应屏幕,其实都是一样的。首先,在网页代码的头部,加入一行viewport标签meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0...
  • 并且pc与手机端是两个不一样的页面。这时就要求判断设置,根据不同的设置跳转不同的路由。 在 router/index.js 中有两个页面。 export default new Router({ mode: 'history', routes: [ { path: '', redirect:...
  • html页面不同手机系统显示会不同

    千次阅读 2018-03-03 13:19:41
    安卓手机判定if(/(Andorid)/i.test(navigator,userAngent)){//内容}//ios手机判定if(/(iPhone)/i.test(navigator,userAngent)){//内容}
  • 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...
  • 怎么让PC端的页面快速适配手机

    千次阅读 2020-09-27 09:59:10
    好不容易做了一些看起来还算精致的页面,突然客户居然提出个奇怪的问题——“你们的项目没有适配手机端” ???看到这一行字的我,内心是懵逼加崩溃的。设计稿是1920像素的宽度,主体部分宽度为1200像素,这是妥妥...
  • nginx区分pc端还是移动端展示不同页面 近几年来,随着手机和pad的普及,越来越多的用户选择使用移动客户端访问网站,而为了获取更好的用户体验,就需要针对不同的设备显示出最合适的匹配,这样就是近年来流行的...
  • tp3.2后台判断手机登录还是pc端登录,跳转不同页面
  • Android实现2个图标app入口进入不同页面,一个图标点击进去主app页面,一个图标点击直接进入app页面的里面一个子页面,两个图标功能点击效果独立,不能乱跳,副桌面图标然后返回也是直接返回,不能先返回到本地,...
  • HTML页面适配手机移动端窗口宽度

    万次阅读 2018-03-21 22:14:29
    于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上,有的还达到了2000像素。同样的内容,要在大小...
  • 对于如何区分pc端和移动端,...但是如果是项目某个页面跳转的话,那就在你跳转路由的时候去判断,以vue为例,vue跳转路由会用到this.$router.push(),我们可以通过判断是pc端还是移动端,从而跳转不同的地址。 例:
  • 手机页面Html设置

    千次阅读 2019-07-08 15:45:52
    手机页面Html设置
  • 手机端h5页面字体大小适配

    千次阅读 2021-06-09 11:44:04
    为解决适安卓手机跟苹果手机字体大小和高度不一致的问题;首先设置初始字体:由于浏览器默认(因为1em=16px,所以0.625em=10px);设置初始字体大小为62.5%;然后根据不同的屏幕尺寸计算相对应的百分比;代码如下:...
  • 在客户端开发中,由于使用手机app加载webview页面,客户端与前端经常会出现数据交互情况; 但是在手机中无法调试看到前端代码的步骤流程,有时候会导致数据交互失败查找问题比较麻烦;因此可以引入Chrome DevTools...
  • 导语:聊到页面,大家应该都知道,有人问192.168.1.1,当然了,还有人想问192.168.0.1,这到底是咋回事?其实192.168.2.1手机登录呢,小编为大家带来192.168.1.101登陆页面手机进入,希望能够帮到您。192.168.1.101...
  • vue页面手机端开发总结

    千次阅读 2020-05-29 10:20:27
    当图片的某元素是一张图片,可不设置宽高,将样式设置为如下,这样图片就会撑起来页面,避免一些宽高在不同机型不协调的问题。 display: block; width: 100%; 需要条件判断显示不同的图片时,可以给标签的src...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 192,296
精华内容 76,918
关键字:

不同手机的页面是怎样的