PC端页面和移动端页面的切换

最新推荐文章于 2023-02-06 22:08:52 发布
最新推荐文章于 2023-02-06 22:08:52 发布
阅读量5.4k 收藏 4
点赞数 2
分类专栏： 响应式页面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tangyuan97/article/details/104155643
版权

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

1.下面前端代码可以判断用户那个终端打开页面，实现跳转

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }
向阳，像样。
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
页面切换的动画过渡
02-03
在使用一些移动端的App或PC端的软件的时候，我们常常会有一些界面之间切换的操作，尤其是在移动端的设备上，因为屏幕尺寸和交互方式的特性，就更多的会出现这些切换的操作，而很突然地从一个界面切换到另一个界面会给用户带来困扰。所以在触发这些操作的同时，往往需要过渡形式的动画来引导用户是如何从一个界面切换到另一个界面的，我们来看看一些常见的界面切换的过渡方式吧。淡入淡出的过渡效果是最为常见的处理手法，这种效果往往能很直观的表现从一个画面到另一个画面变化的过程，视觉表现上比较柔和，但同时通常会局限在需要过渡的两个界面之间有一定的共同特点。比如把iPhone从第一屏滑动到Spotlight页面时候的效果，
PC端和移动端适配样式fit.css
10-15
PC端和移动端适配样式fit.css
HTML实现PC和手机端自适应的APP下载官网源码.rar
08-16
HTML实现PC和手机端自适应的APP下载官网源码 随着智能手机的普及，越来越多的人使用移动设备来下载、安装和使用应用程序。因此，作为一名开发者或软件创业者，您需要为您的APP提供一个有吸引力且易于浏览的介绍网站，让用户能够轻松地了解您的产品并下载使用。
vue cli3适配所有端方案的实现
11-20
应用场景 页面需要在pc端和移动端同时兼容，以前我的方案都是使用媒体查询来判断当前设备大小，然后写两套或者三套css代码来兼容他们，能达到目的，并且效果不错，但是感觉还是稍微麻烦了一丢丢。后面了解了一下flexable.js脚本，稍作修改，基本可以满足我的需求。 postcss-px2rem yarn add postcss-px2rem postcss-px2rem插件可以将px转为rem,需要在vue.config.js(项目没有的话就手动创建一个)中配置插件 // css相关配置 css: { // 启用 CSS modules modules: false,
php 换到pc端,在thinkPHP3.2.3框架下实现手机和PC端浏览器的切换
weixin_36390615的博客
03-11 224
查看thinkphp版本号方法php打开文件“根目录\ThinkPHP\ThinkPHP.php”下的文件ThinkPHP.php，在22--23行能够看到版本信息THINK_VERSION,以下图：css 说明：此方法不破坏原有的Thinkphp框架，对之后框架升级没影响，而且能够共用前台的model和controller，减小代码的繁琐重复；html第一步：新建 ismobile() 函数文件...
PC端页面和移动端页面，两份代码来回切换
wangdanYL的博客
06-07 900
PC端页面和移动端页面，两份代码来回切换_前端菜鸟丶Ndie的博客-CSDN博客_reactpc端移动端切换当你分开用两份代码写PC端和移动端时，需要根据情况来判断显示那一份，可以入下解决将两份代码放入一个文件夹内，通过一个入口html文件来进行判断显示main.html //判断是手机还是电脑if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBro
pc端和移动端切换
qq_43654065的博客
03-10 6406
1. 切换.html（同一套css） 网页通常需要适配pc端和移动端，适配可以通过响应式布局判断屏幕尺寸来展示不同的效果，还可以通过编写两个页面，也就是pc端和移动端分别写一个页面，这种方式更方便功能模块的编写。 通常情况下，pc端域名使用www，而移动端域名使用m，在编写pc和移动两个页面时，在实际页面加载时需要加载到对应的页面，所以需要判断设备的类型，让搜索引擎和浏览器知道，pc端用户应该访问那个页面，移动端用户应该访问哪个页面。 //判断是手机还是电脑 if((navigator.userAgent
JS---PC端和移动端的无缝切换
weixin_34037515的博客
12-17 978
最近帮同事优化网站，出现了移动端页面排版布局混乱问题，特此优化 function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; ...
最简单的js电脑端跳转手机端代码
weixin_42287925的博客
03-29 1171
<script type="text/javascript"> if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { window.location.href = "http://m.baidu.com"; //可以换成http...
检测PC端和移动端的方法总结（转）
白开水的博客
11-02 2295
检测PC端和移动端的方法总结（转） 正在苦逼的实习中，昨天公司让做一个页面，涉及到检测终端的问题，如果是手机设备，就跳转到指定的网页上，以前写响应式布局只要用@media screen来实现布局的差异化适应，但是现在不仅仅是布局，还要针对移动端做一些别的动作，所以看了点资料，做个总结 方法一、还是用@media screen 思路：css使用媒体查询，当屏幕小于760px时，使某
记录navigator实现不同设备页面跳转
qq_45654741的博客
07-18 551
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { window.location.href = ""; //手机端网址 }else{
Vue动态切换PC端与移动端
acheding的博客
10-25 2028
通过监听客户端宽度（clientWidth）的方式来实现动态修改布局及样式。
vuecli3中实现根据用户设备自动切换pc端和移动端两套代码
jiangjunyuan168的博客
11-04 2880
需求： 项目中pc端和移动端两套代码需根据用户的设备进行自动切换。 说明： 该方法中的所有系统都是在同一根目录下，只是实现了多入口在入口处添加用户设备的条件判断，通过不同的入口显示不同的页面。 实现： 代码分为两个部分，pc端（pc）和移动端（move） 在使用脚手架创建项目的时候就有一个系统了，这里将脚手架创建出来的这个做pc端，我只需要再添加一个移动端的就可以了。 1、在public文件下创建一个move.html (复制index.html做修改就可以了) 2、修改move.html 改成 id=“
pc 端与 移动端 页面切换
m0_71615654的博客
10-14 514
利用windon 的属性 navigator.userAgent 获取浏览器的信息判断 利用 window.location.hret = "页面地址"注意：地址后拼 #/ 为hash 方式跳转 解决 页面闪动问题。
pc端与移动端适配 解决方案
sun_qqq的博客
02-06 3405
目前流行的响应式网页开发方案
js -- 移动端pc端自动切换
weixin_30598225的博客
08-31 679
1. 判断浏览器类型 浏览器判断使用的github开源项目current-device，下面是地址： https://github.com/matthewhudson/current-device 在浏览器中可以使用下面地址进行浏览器引入，但是加载速度慢，不建议使用，我这里是直接下载本地。 <script src="https://unpkg.com/current-device...
pc端与移动段的互相切换
Welcome to my csdn!
05-08 1343
实现页面切换的话主要是使用到了h5新增的navigator属性。 操作： PC页面=>PE页面 如果当前是pc端页面，加入以下代码，更改移动段代码，点击F12然后刷新页面即可进行切换。 if (/Android|webOS| iPhone | iPad | iPod |BlackBerry|opera mini|opera mobile|appleWebkit.*mobile|mobile/i.test( navigator.userAgent)) {
网站 手机版 电脑版 相互切换
龚清林的博客
01-29 2085
1、首先在公共程序那边加判断是否手机访问网站，是手机访问就跳转到手机页面//手机跳转 if(is_mobile_request() and empty($_SESSION['pc'])){ header("location:mobile.php"); exit(); }2、在手机版要访问电脑版，电脑版，url为一个赋值给$_SESSION[‘pc’]的程序就行，然后跳转电脑版首页。
vue2pc和移动端
最新发布
12-05
根据提供的引用内容，可以得知在Vue2中，可以通过动态组件和$store.state.device来控制当前展示的页面为pc端还是移动端。同时，为了适应移动端设备的屏幕大小不一，可以使用postcss-px-to-viewport将项目中的px单位转换为vw。 下面是一个简单的例子，演示如何在Vue2中实现pc端和移动端的切换，并使用postcss-px-to-viewport将px单位转换为vw： 1.在index.vue中定义pc.vue和m.vue组件，并使用动态组件和$store.state.device来控制当前展示的页面为pc端还是移动端： ```html <template> <div> <component :is="device === 'pc' ? 'pc' : 'm'"></component> </div> </template> <script> import pc from './pc.vue' import m from './m.vue' export default { components: { pc, m }, computed: { device() { return this.$store.state.device } } } </script> ``` 2.在postcss.config.js中配置postcss-px-to-viewport插件，将px单位转换为vw： ```javascript module.exports = { plugins: { 'postcss-px-to-viewport': { viewportWidth: 750, // 设计稿宽度 unitPrecision: 3, // 转换后保留的小数位数 viewportUnit: 'vw', // 转换后的单位 selectorBlackList: ['.ignore', '.hairlines'], // 不转换的类名 minPixelValue: 1, // 小于等于1px的不转换 mediaQuery: false // 允许在媒体查询中转换px } } } ``` 3.在组件中使用vw单位代替px单位： ```html <template> <div class="container"> <div class="box"></div> </div> </template> <style scoped> .container { width: 100vw; height: 100vw; } .box { width: 100px; height: 100px; background-color: red; } </style> ``` 以上是一个简单的例子，演示了如何在Vue2中实现pc端和移动端的切换，并使用postcss-px-to-viewport将px单位转换为vw。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

向阳，像样。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值