pc端中写的单独页面适配手机（移动端）

最新推荐文章于 2024-06-03 20:21:49 发布
最新推荐文章于 2024-06-03 20:21:49 发布
阅读量172 收藏
点赞数
文章标签： 智能手机
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44191318/article/details/134545157
版权 
// 判断是否是手机端，如果是，返回true
_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;
    },

飞天的毛毛虫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
PC端和移动端的适配问题
qq_50563868的博客
07-03 3947
PC端和移动端的适配问题
vue3移动端适配的解决方案（老方案）
12-01
文件名 "vue3-page-adapter-pc-m" 暗示这是一个包含移动端和桌面端适配的 Vue3 页面示例。可能包含了不同的 CSS 样式文件、媒体查询和自定义组件，用于演示如何在 Vue3 项目中实现跨平台适配。 6. **具体实践**： ...
PC适配移动端
qq_44428688的博客
05-11 445
/ 当前屏幕宽度与最小适配宽度比较。至于字体需要定义一个统一的标准 小屏幕的字号 中屏幕的字号 大屏幕的字号和超大屏幕的字号。// 最小适配的屏幕宽度。移动端不需要显示的页面可以过滤路由 不需要显示的块可以用css隐藏。/* 大屏幕（大桌面显示器，大于等于 1200px） *//* 中等屏幕（桌面显示器，大于等于 992px） *//* 小屏幕（平板，大于等于 768px） */
7个步骤让PC网站自动适配手机网页
热门推荐
qietuwang的博客
06-17 2万+
传统的网站如何完成向移动设备的快速转型？ 通过移动适配技术可以实现，切图网是国内首家基于web技术服务的公司，而移动适配主要通过底层的web技术开发手段来完成，下面切图网将从技术角度来告诉你通过7个步骤来完成一个PC网站向移动设备的跳跃！ 1允许网页宽度自动调整 “自适应网页设计”到底是怎么做到的？其实并不难。 首先，在网页代码的头部，加入一行viewport元标签。 viewport是网
一篇文章搞懂！vue中pc端与移动端适配解决方案（亲测有效）
最新发布
djemx2025的博客
06-03 2375
当涉及屏幕适配方案时，我们常常被众多选择所困扰，如postcss-pxtorem、postcss-px2rem、px2rem-loader、postcss-plugin-px2rem等。然而，在实际测试中，由于不同的Vue和Webpack版本，很多这些方式已经无法使用，反而带来了更多麻烦。为了尽快解决问题，我们应该始终以解决问题为导向，首先采用那些已经获得验证并能产生效果的方法。对于上述列举的方案，虽然没有一一测试过，但我们需要明确的是，抓住解决问题的关键。
pc与移动端端适配网页模板
02-15
基于pc与移动端完美适配模板解决方案，对于前端新手来说稍加改动就可完成建站
vue项目PC兼容移动端
weixin_43835827的博客
04-27 5675
做完的pc项目要求兼容移动端，常规操作的话是新做一个webapp后再来回跳转， 当前pc项目没有太多的交互和复杂的页面，所以决定在一个项目里进行兼容适配 1.新建两个组件，pc端页面组件，m端页面组件 2.页面写个方法判断是pc端还是移动端（可在全局写） methods: { //判断 _isMobile() { let flag = navigator.userA...
3个pc网站适配手机的方法
linjingyg的博客
12-10 5669
　　 　　新的形势下，移动网站的使用率越来越高。移动网站的优化如何做被更多的人所关注。这里切图移动就从目前三种比较常用的pc站点移动配置方式，并从性能，需求，成本方面对三者进行了分析，并给出相应的优化建议。pc站与移动站配置方式中有三种较为主流，分别是跳转适配，代码适配和自适应。下面分别对这三种给予详细的介绍和对比，希望能对大家的建站提供帮助。 　　1、跳转适配 　　利用单独的网址向每种设备提供不同的代码，这种配置会尝试检测用户所使用的设备或ua，然后使用http重定向和varyhttp标头重..
聊一聊移动端适配
csdn_chuan的博客
12-02 737
移动web开发在当下很常见，今天我们就聊聊里面牵涉的一些技术点。
移动端+pc端自适应适配解决方案
06-29
适用于前端H5 pc端的适自创适配方案，有效解决各个尺寸适配，根据浏览器可视区域自适应元素，使用方法：将资源下载下来，放入单独js文件中，独立写成一个全局方法，如果是vue项目就在main.js中引入。如果是原生js...
10几个纯静态HTML小游戏，适配移动端PC端
01-22
这些资料构成了一组纯静态HTML小游戏集合，适合在移动端和PC端运行，无需任何特定的运行环境或服务器支持。这体现了HTML技术的强大之处，它能够跨平台地展示内容，为用户提供便捷的游戏体验。 HTML（HyperText ...
vue写h5页面的方法总结
11-28
下面就是小编带给大家的如何用vue写h5页面方法操作，希望能够给你们带来一定的帮助，谢谢大家的观看。 1、当拿到设计师给的UI设计图，前端的首要任务就是布局和样式，相信这对于大部分前端工程师来说已经不是什么...
Thinkphp框架开发移动端接口(2)
10-21
在本篇中，我们将深入探讨如何使用ThinkPHP框架开发移动端接口的第二种方法，重点在于实现移动端访问时自动切换移动主题模板，...无论是PC端还是移动端，都能得到相应的定制化展示，这也是现代Web应用开发的重要趋势。
一篇文章搞懂，vue中pc端与移动端适配解决方案（亲测有效）
Web面试那些事儿的博客
10-11 6623
当涉及屏幕适配方案时，我们常常被众多选择所困扰，如postcss-pxtorem、postcss-px2rem、px2rem-loader、postcss-plugin-px2rem等。然而，在实际测试中，由于不同的Vue和Webpack版本，很多这些方式已经无法使用，反而带来了更多麻烦。为了尽快解决问题，我们应该始终以解决问题为导向，首先采用那些已经获得验证并能产生效果的方法。对于上述列举的方案，虽然没有一一测试过，但我们需要明确的是，抓住解决问题的关键。
h5响应式布局、PC和移动端适配方案
weixin_45732455的博客
03-31 7330
总结一下在实习期间遇到的h5的响应式布局、PC和移动端适配方案的介绍、选择以及一些问题。
解决PC端和移动端的适配和兼容问题的处理方式
qianluo111的博客
10-22 1万+
我们经常会看到在我们的html页面中出现了这样一行代码， <meta name="viewport" content="width=device-width, initial-scale=1.0"> 那么这行代码有什么意义呢？ 第一种：可能只是简单地认识，只要加上这行代码，然后页面的宽度就会跟我的设备宽度一致。这种是比较片面的理解。 第二种：那么这一种是什么呢？让我们先往下看，答案就在其中。 先说一下单位，我们经常看到的是以像素为单位，但是也会有以百分比和rem为单位的。 那么，在
PC端、移动端的页面适配及兼容处理
TXL__的博客
06-03 6313
一、关于移动端兼容性 目前针对跨终端的方案，主要分为两大阵营：一套资源Vs两套资源。 　　第一种是通过响应式或页面终端判断去实现一套资源适配所有终端； 　　第二种是通过终端判断分别调取两套资源以适配所有终端。 　　这两种思路我们并不能斩钉截铁的说哪一个更优选，正所谓”合适的才是最好的”。 　　思路一:通过响应式或页面终端判断去实现一套资源适配所有终端
pc端与移动端适配 解决方案
sun_qqq的博客
02-06 3603
目前流行的响应式网页开发方案
vue项目pc端和移动端适配
zqq840818278的博客
09-19 1万+
vue项目pc端和移动端适配
vue3使用element plus实现pc端登陆页面适配移动端
07-27
在Vue3中使用Element Plus实现PC端登录页面适配移动端的方法如下： 1. 首先，你可以使用postcss-pxtorem插件来实现移动端适配。在项目中安装并配置好该插件，可以将设计稿上的像素值直接写入样式中，插件会自动将其转换为适配移动端的单位。 2. 对于PC端，可以在配置中排除该插件的影响，以避免对PC端样式的影响。一般来说，PC端不需要进行太多的适配，可以设置一个最小宽度，当用户的屏幕宽度小于该值时出现滚动条，以保持布局的稳定性。 3. 在编写HTML和CSS代码时，需要根据不同的设备（PC和移动端）编写不同的代码。可以通过判断设备类型来加载不同的HTML和CSS文件，或者使用媒体查询来适配不同的屏幕尺寸。 总结起来，你可以使用postcss-pxtorem插件来实现移动端适配，同时在PC端排除该插件的影响。根据不同的设备类型，编写不同的HTML和CSS代码来实现PC端登录页面的适配移动端。 #### 引用[.reference_title] - *1* *3* [vue3.0 + ts 项目实现pc端和移动端的适配+判断设备](https://blog.csdn.net/qq_46143850/article/details/117107129)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue使用Element-UI部分组件适配移动端](https://blog.csdn.net/m0_46627730/article/details/108015137)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值