资讯专栏INFORMATION COLUMN

如何判断是PC端还是移动端来显示页面?

jhhfft / 1246人阅读

摘要:进入域后判断是移动端还是端显示不同的页面很多情况下,一个应用会有和移动端两个版本,而这两个版本因为差别大,内容多,所以不能用响应式开发但是多带带开发,而域名只有一个,用户进入域后直接返回对应设备的应用,做法主要有两种前端判断并跳转进入一个应用

进入域后判断是移动端还是pc端显示不同的页面(PC/MOBILE)

很多情况下,一个应用会有PC和移动端两个版本,而这两个版本因为差别大,内容多,所以不能用响应式开发但是多带带开发,而域名只有一个,用户进入域后直接返回对应设备的应用,做法主要有两种:

前端判断并跳转

进入一个应用或者一个空白页面后,通过navigator.userAgent来判断用户访问的设备类型,进行跳转

后端判断并响应对应的应用

用户地址栏进入域的时候,服务器能接收到请求头上包含的userAgent信息,判断之后返回对应应用

function foo(){
    getName = function(){console.log(1)}
    return this
}
foo.getName = function(){console.log(2)}
foo.prototype.getName = function(){console.log(3)}
var getName = function(){console.log(4)}
function getName(){console.log(5)}


foo.getName()//2
//foo是一个函数,也可以说是一个对象,所以它也可以挂载一些属性和方法,18行在其上挂载了一个getName方法
//执行的结果是

getName()//4
//21行有一个全局函数,全局函数声明提前后被20行的getName覆盖,所以输出4

foo().getName()//1
//foo()执行完成后,将全局的getName也就是window.getName给更改后返回this,而在这里this执行的就是window,所以最后执行的就是window.getName,所以输出1

getName()//1
//在上面已经更改全局的getName,所以依然是1

new foo.getName()//2
//new 操作符在实例化构造器的时候,会执行构造器函数,也就是说,foo.getName会执行,输出2

new foo().getName()//3
//new操作符的优先级较高,所以会先new foo()得到一个实例,然后再执行实例的getName方法,这个时候,实例的构造器里没有getName方法,就会执行构造器原型上的getName方法

new new foo().getName()//3
//先执行new foo()得到一个实例,然后在new 这个实例的getName方法,这个时候会执行这个方法,所以输出3

//除了本地对象的方法,其他的函数都能new

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92290.html

相关文章

  • CSS5:移动页面(响应式)

    摘要:接下来做端一般都写手机最大也就先隐藏手机菜单和按钮优先级问题解决方法直接使用用谷歌开发者工具查看优先级里面的垂直居中再把写成布局只要改成里面的子项目就变成一行了菜单导航导航导航导航导航到航导航导航导航导航方法切换元素的可见状态。 CSS5:移动端页面(响应式) 如果手机端和PC端页面差别很大,就不要写响应式,不要写@media 就直接将两个页面拆开成两个文件就可以了.关于判断是手机端你...

    superPershing 评论0 收藏0
  • 移动适配方案

    摘要:业务环境是决定整体项目的适配方案的核心因素。而淘宝的主站和类似,分为移动端页面和端页面,端页面同样有着左右的留白,这也是为了让用户能够在宽屏的时候将注意力集中在中间区域。 移动端适配方案 移动端适配方案是一个老生常谈的话题,但是对于不同的项目、不同的业务场景可能会需要不同的适配方案来进行移动端适配,向下兼容的baseline也需要提前订好。 整体宽高 其实移动端适配就和下面的玩具一样,...

    feng409 评论0 收藏0
  • 给自己的网站接入谷歌翻译,以及修复了一个谷歌翻译的一个bug

    摘要:给网站加谷歌翻译,搜索引擎一搜一大堆,这里不再赘述。,原生,并且谷歌显示在右侧。,为什么把中的改成了理由同,为什么的前面加了个符号这里正是谷歌翻译的一个,猜测和中的某些正则匹配有关。 给网站加谷歌翻译,搜索引擎一搜一大堆,这里不再赘述。只贴一个申请谷歌翻译的一个地址:https://translate.google.com/...和一段代码: 下面是官方给出的代码: function...

    cangck_X 评论0 收藏0

发表评论

0条评论

jhhfft

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<