vue项目门店官网页面, 根据视口大小自动跳转页面逻辑(pc --> mobile / mobile -->pc)

vue门店官网页面, 根据视口大小自动跳转页面逻辑(pc --> mobile / mobile -->pc)

在app.html文件添加以下代码逻辑

pc --> mobile

//  PC切换M端
;(function () {function resizeEventHandler() {var isMobile = /(iPhone|iPad|iPod|iOS|Android)/i.test(window.navigator.userAgent)var deviceWidth = document.documentElement.clientWidthif (isMobile || deviceWidth <= 750) {// 跳转移动端页面console.log('[pc端页面--PC端访问->切换M端:]')var origin = window.location.originwindow.location.href = origin + '/mobile/'}}if (!document.addEventListener) returnwindow.addEventListener('resize', resizeEventHandler)document.addEventListener('DOMContentLoaded', resizeEventHandler)
})()

mobile -->pc逻辑与上面相似

<script>// M端切换PC端(function() {function resizeEventHandler () {var isMobile = /(iPhone|iPad|iPod|iOS|Android)/i.test(window.navigator.userAgent);var deviceWidth = document.documentElement.clientWidth;if (!isMobile && deviceWidth > 750) {// 跳转PC端页面console.log('[PC端页面--M端访问->切换PC端:]');var origin = window.location.origin;var pathname = window.location.pathname.replace('/mobile', '');var search = window.location.search;window.location.href = origin + pathname + search;}}if (!document.addEventListener) return;window.addEventListener('resize', resizeEventHandler);document.addEventListener('DOMContentLoaded', resizeEventHandler);})();</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/173634.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构与算法编程题27

计算二叉树深度 #define _CRT_SECURE_NO_WARNINGS#include <iostream> using namespace std;typedef char ElemType; #define ERROR 0 #define OK 1 #define Maxsize 100 #define STR_SIZE 1024typedef struct BiTNode {ElemType data;BiTNode* lchild, * rchild; }BiTNo…

2023中学生古诗文阅读专辑(初中适用)使用和备考的几点建议

上周六的2023年第八届小学生古诗文大会复选结束后&#xff0c;很多孩子和家长大呼“太难了”&#xff0c;平时刷的题好像都没用&#xff0c;蓦然回首&#xff0c;发现很多题目都在主办方出版的《古诗文阅读专辑》上&#xff0c;只是考得非常的细。 所以&#xff0c;昨天有家长在…

计算机毕业设计|基于SpringBoot+MyBatis框架的电脑商城的设计与实现(系统概述与环境搭建)

计算机毕业设计|基于SpringBootMyBatis框架的电脑商城的设计与实现&#xff08;系统概述与环境搭建&#xff09; 该项目分析着重于设计和实现基于SpringBootMyBatis框架的电脑商城。首先&#xff0c;通过深入分析项目所需数据&#xff0c;包括用户、商品、商品类别、收藏、订单…

Vue组件的自定义属性Props

Vue的组件相当于HTML中的自定义标签&#xff0c;与HTML标签属性对应的概念就是组件的Props。组件的Props是给父组件使用的&#xff0c;使用时需要明确指定属性的值&#xff0c;或者是在组件定义时&#xff0c;给属性提供默认值。组件对象使用Props时&#xff0c;要更多的地应用…

基于C#实现十字链表

上一篇我们看了矩阵的顺序存储&#xff0c;这篇我们再看看一种链式存储方法“十字链表”&#xff0c;当然目的都是一样&#xff0c;压缩空间。 一、概念 既然要用链表节点来模拟矩阵中的非零元素&#xff0c;肯定需要如下 5 个元素(row,col,val,down,right)&#xff0c;其中&…

初识数据结构

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 熬过了我们不想要的生活&#xf…

麒麟V10服务器搭建FTP服务

概念 1.1介绍 FTP&#xff1a;File transfer protocol 文件传输协议 1.2原理 默认采用被动模式 被动模式FTP 为了解决服务器发起到客户的连接的问题&#xff0c;人们开发了一种不同的FTP连接方式。这就是所谓的被 动方式&#xff0c;或者叫做PASV&#xff0c;当客户端通…

删除巨大文本文件的最后一行

用truncate去年最后的字节数。 export file"abc.json"tail -n 1 "$file" | wc -c | xargs -I {} truncate "$file" -s -{}mac上面truncate需要安装一下。 参考&#xff1a; Remove the last line from a file in Bash - Stack Overflow

Vue路由器(详细教程)

路由&#xff1a; 1.理解&#xff1a;一个路由(route)就是一组映射关系&#xff08;key-value)&#xff0c;多个路由需要路由器&#xff08;router&#xff09;进行管理。 2.前端路由&#xff1a;key是路径&#xff0c;value是组件。 1、先安装vue-router路由 npm i vue-route…

车载通信架构 —— 传统车内通信网络LIN总线(低成本覆盖低速场景)

车载通信架构 —— 传统车内通信网络LIN总线(低成本覆盖低速场景) 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是…

go的HTTP网络编程

欢迎大家到我的博客浏览。go的HTTP网络编程 | YinKais Blog go的HTTP网络编程 1、http编程--server示例 package main ​ import ("fmt""net/http" ) ​ func main() {// 注册处理函数&#xff0c;定义 URL 路由和对应的处理函数http.HandleFunc("…

redisserver一闪而过 redis闪退解决版本

1.进入Redis根目录 2.输入redis-server 或 redis-server.exe redis.windows.conf 启动redis命令&#xff0c;看是否成功。 执 一闪而过的问题 可能是因为已启动或者其他问题&#xff0c;需要重启 先输入redis-cli.exe再输入shutdown再输入redis-server.exe redis.windows.c…

扩散模型实战(十二):使用调度器DDIM反转来优化图像编辑

推荐阅读列表&#xff1a; 扩散模型实战&#xff08;一&#xff09;&#xff1a;基本原理介绍 扩散模型实战&#xff08;二&#xff09;&#xff1a;扩散模型的发展 扩散模型实战&#xff08;三&#xff09;&#xff1a;扩散模型的应用 扩散模型实战&#xff08;四&#xff…

ajax请求接口数据和显示在页面里 Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法

$.ajax({ url:"这里是你要请求的地址", data:{"id":id}, //以键/值对的形式 async : false, dataType : "json", success : function(data) { for(int i 0; i < data.length; i) { //循环后台传过来的Json数组 var datas data…

计算机毕业设计|基于SpringBoot+MyBatis框架的电脑商城的设计与实现(用户上传头像+用户收货管理)

计算机毕业设计|基于SpringBootMyBatis框架的电脑商城的设计与实现&#xff08;用户上传头像&#xff09; 该项目分析着重于设计和实现基于SpringBootMyBatis框架的电脑商城。首先&#xff0c;通过深入分析项目所需数据&#xff0c;包括用户、商品、商品类别、收藏、订单、购物…

redisson实现分布式锁(支持redis单例/集群)

redisson实现分布式锁 前言一、引入redisson依赖二、redis 配置三、redisson 配置1.集群配置2.单例配置 四、分布式锁使用-业务层demo 前言 还是在工作中遇到的问题&#xff1a; 1&#xff1a;新增商铺信息时&#xff0c;同一个商铺有多条信息。 异步的情况&#xff0c;根据商…

NX二次开发UF_CURVE_ask_parameterization 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CURVE_ask_parameterization Defined in: uf_curve.h int UF_CURVE_ask_parameterization(tag_t object, double param_range [ 2 ] , int * periodicity ) overview 概述 Retu…

国产Ai大模型和chtgpt3.5的比较

下面是针对国产大模型&#xff0c;腾讯混元&#xff0c;百度文心一言&#xff0c;阿里通义千问和chatgpt的比较&#xff0c;最基础的对一篇文章的单词书进行统计&#xff0c;只有文心一言和chatgpt回答差不多&#xff0c;阿里和腾讯差太多了

深度学习中的注意力机制:原理、应用与实践

深度学习中的注意力机制&#xff1a;原理、应用与实践 摘要&#xff1a; 本文将深入探讨深度学习中的注意力机制&#xff0c;包括其原理、应用领域和实践方法。我们将通过详细的解析和代码示例&#xff0c;帮助读者更好地理解和应用注意力机制&#xff0c;从而提升深度学习模…

Vue快速实践总结 · 下篇

文章目录 组件间通信方式父 --> 子通信props插槽 子 --> 父通信&#xff08;自定义事件&#xff09;任意组件通信全局事件总线消息订阅与发布 Vuex工作原理运行环境简单使用GettersmapState与mapGettersmapActions与mapMutations模块化 命名空间 VueRouter路由的作用与分…