-
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标签底部;更多相关内容 -
识别手机是苹果还是安卓跳转不同页面
2018-10-31 17:42:22js识别手机系统是苹果还是安卓的,以便跳转不同的url路径 -
手机新闻客户端不同页面设计下用户视觉浏览规律研究.pdf
2021-08-26 22:42:09手机新闻客户端不同页面设计下用户视觉浏览规律研究.pdf -
vue前端判断当前是PC端还是手机端,跳转不同页面
2021-03-23 21:43:26二、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)
-
通过配置实现电脑和手机访问分别显示不同的页面(以thinkphp5为例)
2018-05-03 15:18:52function 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的... -
同一个网站,手机端跟电脑端显示不同是怎么实现的?
2021-06-14 00:54:19同一个网站,手机端跟电脑端不同是怎么实现的?常见的方式有三种:1,自适应网站同一套代码,自动实现手机端和电脑端的布局自动调整。例如:openGPS.cn网站现在大部分页面已经支持自适应展示,手机端电脑端都可以... -
手机端兼职工作页面wap模板.zip
2019-08-11 12:05:02手机端兼职工作页面wap模板,有四个下拉分类,分别按不同方式进行搜索 -
识别pc和手机版跳转不同的页面
2017-04-21 11:20:22function browserRedirect(partMent) { var sUserAgent= navigator.userAgent.toLowerCase(); var bIsIpad= sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs= sUserAgent.match(/iphone os/i) == ... -
vue移动端html5页面根据屏幕适配的四种解决方法
2020-10-17 20:41:20在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块主要有四个方法可以适用。这篇文章主要介绍了vue移动端h5页面根据屏幕适配的四种方案 ,需要的朋友可以参考下 -
同一个网址,不是响应式网址,如何实现手机端和pc端显示不同的页面
2019-11-16 15:56:241、同一个网址,不是响应式网址,如何实现手机端和pc端显示不同的页面 2、pc页面始终是一个页面样式 3、手机端访问是一个页面样式 已有思路: 1、后台判断访问设备,后台返回相对应的样式,前端js渲染输出 ... -
同样网址,为什么网页版和手机版页面显示不一样?useragent不同
2019-12-31 11:21:17请求中氛围页面和手机版请求useragent不同 网页版 手机版 -
Vue - 判断当前设备是手机端或者pc端,根据设备展示页面
2020-10-27 17:20:30判断当前设备是手机端或者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... -
vue-判断设备是手机端还是pc端,进行两套页面样式的编写
2021-09-14 16:19:26并且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)){//内容} -
前端 js 判断设备类型是手机还是PC 并打开不同设备下的页面
2018-03-29 17:25:04window.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端还是移动端展示不同页面
2021-07-21 16:41:30nginx区分pc端还是移动端展示不同页面 近几年来,随着手机和pad的普及,越来越多的用户选择使用移动客户端访问网站,而为了获取更好的用户体验,就需要针对不同的设备显示出最合适的匹配,这样就是近年来流行的... -
tp3.2后台判断手机登录还是pc端登录,跳转不同页面
2017-06-12 19:48:38tp3.2后台判断手机登录还是pc端登录,跳转不同页面 -
Android之实现多桌面图标app入口进入不同的页面,像2个独立运行的app一样,互不干扰。
2021-07-16 17:54:36Android实现2个图标app入口进入不同的页面,一个图标点击进去主app页面,一个图标点击直接进入app页面的里面一个子页面,两个图标功能点击效果独立,不能乱跳,副桌面图标然后返回也是直接返回,不能先返回到本地,... -
HTML页面适配手机移动端窗口宽度
2018-03-21 22:14:29于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上,有的还达到了2000像素。同样的内容,要在大小... -
前端:一个相同的链接在pc端和移动端打开不同的页面样式
2022-04-06 14:54:25对于如何区分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%;然后根据不同的屏幕尺寸计算相对应的百分比;代码如下:... -
手机Web前端调试页面之——Chrome DevTools(谷歌浏览器)的模拟手机调试
2020-08-02 20:36:38在客户端开发中,由于使用手机app加载webview页面,客户端与前端经常会出现数据交互情况; 但是在手机中无法调试看到前端代码的步骤流程,有时候会导致数据交互失败查找问题比较麻烦;因此可以引入Chrome DevTools... -
192.168.1.101登陆页面手机进入 即可登陆
2020-12-30 21:51:38导语:聊到页面,大家应该都知道,有人问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...
收藏数
192,296
精华内容
76,918