前端开发—根据访问的设备来展现相应的pc端或者移动端网页

偷瞄一眼代码คิดถึง

已于 2022-05-19 15:21:48 修改

阅读量783

点赞数

文章标签：前端

于 2022-05-19 15:13:20 首次发布

本文链接：https://blog.youkuaiyun.com/see_you_codes/article/details/124863298

版权

本文介绍了在开发过程中如何根据用户访问设备显示相应的PC端或移动端网页。作者首先尝试了响应式布局但未成功，选择了通过判断用户代理（UA）来实现。提出了两种方法：一是在前端JavaScript中判断UA，二是在后端nginx中判断UA。作者倾向于使用后端判断，以避免响应式布局中可能出现的延迟跳转问题，并提供了相关的参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：
在开发完PC端后，被告知要适配移动端。适配移动端有两种方法，一是响应式布局，二是单独开发移动端。一开始试了试第一种方法发现不合适，于是选择第二种。那么关键问题是如何在同一网址的情况下在PC端访问则返回PC端页面，在移动端访问则返回移动端页面。

这里推荐第二种方法！因为第一种方法在判断完了之后，跳转链接时会明显的在原网页停留，然后才跳转到新网页
法一：在前端JS中判断UA

var userAgent = navigator.userAgent.toLowerCase();
    var platform;
    if (userAgent == null || userAgent == '') {
   
        platform =

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

偷瞄一眼代码คิดถึง

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

js根据用户打开的设备显示不同端的页面

需要点灵感

07-22

648

try { var urlhash = window.location.hash; if (!urlhash.match("fromapp")) { if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i))) { //当用户用手机端打开时，控制打开移动端网站 window.location = "http://www.zingers

H1066_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip

最新发布

08-04

在当前互联网时代，网页设计已经从单一的PC端扩展到了多设备兼容的移动端。H1066_html网站模板，作为一款专为移动端前端设计的H5模板，其核心在于自适应响应式布局，能够确保网站在不同屏幕尺寸的设备上都能呈现最佳...

参与评论您还未登录，请先登录后发表或查看评论

前端通过路径，根据设备，显示PC/移动端界面的方法

hbmern的博客

07-15

1388

背景：项目中需要移动端和pc端，通过媒体查询写一套太麻烦了，于是搞了PC一套，移动端一套，那么问题来了，怎么在移动端显示移动端的页面，PC端显示PC端的页面？蹬蹬瞪~于是乎，就有了这篇文章！！解决方案： 1、分别将PC端、移动端的打包文件夹名称改成pc、mobile; 2、分别修改PC、移动端项目打包配置项，具体如下： 移动端（vue-cli 3.x vue.config.js文件） PC端（vue cli 2.x:config-->index.js) 3、在外层...

根据不同的访问设备跳转不同的域名链接

qq_36527174的博客

12-02

1118

根据不同的访问设备跳转不同的域名链接 <script> //获取浏览器或者手机对象 function req_bortype() { var systemnumber; var systemname=window.navigator.userAgent.toLowerCase(); //判断是否苹果设备 if (/(iphone|ipad|ipod|ios)/i.test(systemname)) { systemnumber=1; return system

根据设备信息进行页面跳转至移动端页面或者PC端页面

weixin_42178670的博客

07-04

289

根据设备信息进行页面跳转至移动端页面或者PC端页面

java 后台获取设备来源实现同一地址多套前端的自动匹配实现

喜欢炒股的码农

07-24

1261

在当前存在的一个很现实的问题就是同一地址，多端访问呈现的均为最适应的前端资源。　　这种情况下有几种方案可以实现　　1、一套资源自动适应多端　　这种情况对前端工程师的挑战比较大，另外兼容性问题也比较多　　2、多套资源，后端开放一个入口，检测请求端设备进行匹配然后返回对应的资源。　　这种情况可能会存在漏洞设备信息的情况，但可以支持大部分情况，实现简单便捷，但是需要开发多套前端资源。后

移动端网页开发与HTML的最佳实践

移动端网页和桌面端网页在布局、交互、性能优化等方面有较大差异。移动端网页需要更加注重页面的轻量化和响应式设计，以适应不同尺寸的移动设备。 ### 1.3 移动设备的特点对网页开发的影响移动设备具有屏幕小、...

响应式H5网页模板：移动端与PC端自适应源码包

一个合格的前端开发工程师必须了解如何使用HTML构建网站的框架，利用CSS来美化网页和进行布局，以及使用JavaScript来增强网页的动态交互能力。对于响应式和自适应网站设计，还需要有对媒体查询（Media Queries）的...

web开发：移动端适配与优化--前端开发的新挑战与解决方案

随着智能手机的普及和移动网络的发展，移动端用户量持续增长，已经超过了传统PC端。因此，对于网站和应用程序来说，移动端适配已经成为必不可少的考虑因素。在本节中，我们将探讨移动端适配的重要性，以及其对用户...

根据终端判断wap和html网页,JS判断是电脑浏览器还是手机端浏览器，并根据不同的终端跳转到不同的网址...

weixin_35250656的博客

06-15

227

JS判断是电脑浏览器还是手机端浏览器，并根据不同的终端跳转到不同的网址function browserRedirect() {var sUserAgent = navigator.userAgent.toLowerCase();var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";var bIsIphoneOs = sUserAgent.match(/...

nuxt-mobile-detect:用于客户端和SSR的Nuxt移动和设备检测插件

05-28

:mobile_phone: Nuxt Mobile检测 nuxt-mobile-detect是用于nuxtjs的的包装。它可以用于客户端和服务器端。注意：是用于移动设备检测的另一个nuxt软件包。 nuxt-mobile-detect增加了〜27.5kb的开销，而@nuxtjs/device只增加了@nuxtjs/device ，许多项目将不需要mobile-detect.js的全部功能，而@nuxtjs/device可以满足其用例。设置使用npm或yarn添加nuxt-mobile-detect依赖性 npm i nuxt-mobile yarn add nuxt-mobile 添加nuxt-mobile-detect到modules的部分nuxt.config.js { modules : [ 'nuxt-mobile' ] } 用法 asyncData (server-s

根据用户设备不同加载不同的样式和js

sunbeibei00000的博客

04-28

502

html判断手机还是电脑,前端js判断访问站点设备(手机还是PC)实现自动跳转代码...

weixin_30682043的博客

06-19

450

网上搜集的不知道实用不先收藏了var commonURL = 'http://www.jsdaima.com/';function mobile_device_detect(url){var thisOS=navigator.platform;var os=new Array("iPhone","iPod","iPad","android","Nokia","SymbianOS","Symbi...

根据设备跳转pc或移动端网站

董无敌啊

05-08

4170

以前也了解过这样的需求，今天做活动页也遇到了这样的需求，查了一些大牛的资料，我是使用第一种方法判别，后边的直接使用图片了，记录一下代码：1.根据访问设备自动识别展示手机或pc网站var system = { win:false, mac:false, xll:false } var p = navigator.platform; system.win = p.indexOf(

根据用户不同的访问方式（移动端/电脑端）调用不同的页面显示

scdxin.COM的博客

06-16

1507

控制pc端和手机端显示不同的页面

z2990986060的博客

10-13

764

《直接添加下方代码至index首页代码最上方》 <script type="text/javascript"> var userAgent = navigator.userAgent.toLowerCase(); var platform; if(userAgent == null || userAgent == '') { platform = 'WEB'; location.href = "http://www.0451hui

同一html页面手机pc不同显示,Nginx根据手机端与电脑端设备相同地址显示不同页面内容...

weixin_31256263的博客

06-03

593

描述:根据用户访问的设备类型，相同的地址显示不同的内容比如，电脑上访问http://192.168.10.100/shop/a.html这个页面显示内容是”AAAAAAAAAAAAA”然后用手机访问http://192.168.10.100/shop/a.html这个页面内容是“BBBBBBBBBBBB”,但访问的URL链接地址是一样，相同的地址显示不同的内容。需求1：电脑访问： http://1...

根据不同访问设备跳转到PC页面或手机页面