使用vue开发h5页面在手机端浏览

最新推荐文章于 2024-05-15 17:05:01 发布
最新推荐文章于 2024-05-15 17:05:01 发布
阅读量1w 收藏 19
点赞数
分类专栏： Java 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38752837/article/details/103046263
版权

最近在使用vue开发移动端页面，一直都在网页上以手机的样式浏览的，想看看切换到真正的手机端浏览是什么样，所以就百度了下，听我娓娓道来。

一、将地址localhost改成本地IP

由于启动vue时会自动使用localhost，不改配置强行在地址栏将localhost换成IP会出现页面找不到现象，所以这里需要在package.json文件中改一下配置。
在这里插入图片描述
之后启动一下，在地址栏输入IP就可以啦~其实这个时候在手机端输入PC端相同的地址栏就可以浏览了，但是我不，必须扫码浏览，哈哈哈哈

二、生成二维码，扫描浏览

百度搜索生成二维码，我这里使用的是草料二维码。
在这里插入图片描述然后就可以微信扫码浏览项目啦~
pick~

恰妹儿
关注
  • 0
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
多个div页签横向展示，滑动点击那个，那个展示在屏幕中间(主要移动端)
jieweiwujie的博客
11-08 81
【代码】多个div页签横向展示，滑动点击那个，那个展示在屏幕中间(主要移动端)
Vue开发手机端页面
weixin_34358365的博客
07-30 4623
我的github记录册(PS:希望star): https://github.com/tonyzheng1... 适配终端: 讲解: http://www.w3cplus.com/mobile... 源码: https://github.com/amfe/lib-f... 代码规范 https://github.com/pablohp...
vue移动端强制横屏展示
hl_Abel的博客
04-22 2743
一、在 index.html 中加入计算 font-size 代码 window.calcFontSize = () => { document.documentElement.style.fontSize = Math.min( document.documentElement.clientWidth, document.documentElement.clientHeight
监听移动端h5页面横竖屏切换
菜狗小仪的博客
04-09 991
new Vue({ el: "#app", data() { return { orientation: '', // 横竖屏标记``, } }, created() { }, mounted() { this.orient(); window.addEventListener( 'orientationchange', this.orient); }, methods: { orient() { if (win
2024年用vue实现H5页面托拽的div(兼容pc与移动端)_h5移动端拖动效果(1)，Web前端攒了一个月的面试题及解答
最新发布
2401_84434301的博客
05-15 449
*《350页前端校招面试题精编解析大全》**内容大纲主要包括。移动端的拖拽事件有点特殊，点击元素获取可视左边的位置的方法不是。：获得的是可视区域的宽高，但是宽度包含了纵向滚动条的宽度。：获得的是屏幕可视区域的宽高，不包括滚动条与工具条，：获得的是加上工具条与滚动条窗口的宽度与高度。按下、拖动、松开事件也改变了，接下来上代码。接下来上代码，先绑定PC端的托拽事件。
【实战】H5 页面同时适配 PC & 移动端 —— 旋转横屏
程序边界
09-15 7640
与此同时，你也会学习协程、异步编程、自动化测试的相关知识，并学习在企业级应用中混合使用Kotlin与Java。作者是Kotlin领域的资深专家和布道者，本书源于他对Kotlin编译器源码的反复研读和大量的工程实践，不仅细致讲解了反射、程序静态分析、 Java注解处理器、Kotlin符号处理器、Kotlin编译器插件、元程序的开发和调试等核心元编程技术，而且详细剖析了Jetpack Compose的编译器插件和IntelliJ 插件、AtomicFU 的 JVM 字节码和JavaScript代码的生成逻辑。
Vue 之 Vue Cli Html 移动端的强制横屏功能简单实现
热门推荐
仙魁XAN
04-10 1万+
Vue 之 Vue Cli Html 移动端的强制横屏功能简单实现 目录 Vue 之 Vue Cli Html 移动端的强制横屏功能简单实现 一、简单介绍 二、实现原理 三、注意事项 四、效果预览 五、实现步骤 六、关键代码 七、其他 一、简单介绍 Vue 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。 本节介绍，Vue Cli Html 移动端的强制横屏功能简单实现，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。 实现竖屏横显示，关键用到了css
VUE Vant移动端开发
weixin_73849581的博客
12-22 1886
vant
vue 在web项目中写H5页面并适配移动端（记一次笔记）
qq_40429514的博客
06-01 2598
vue 在web项目中写H5页面并适配移动端（记一次笔记）
pdf.js 手机端或H5显示pdf
12-28
4. **互动和手势支持**：在手机端，用户通常会通过触摸屏幕来滚动、缩放和旋转 PDF。PDF.js 提供了对这些手势的支持，使用户可以自然地与 PDF 文档交互。 5. **性能优化**：考虑到移动设备的资源限制，PDF.js 采用...
一个移动端专用的Vue2图片预览插件
08-12
Vue.js是一个轻量级的前端JavaScript框架，以其组件化、易上手的特性在开发界受到广泛欢迎。在移动端应用中，图片预览是一个常见的需求，例如在电商产品展示、社交分享、媒体应用等场景，用户可能需要查看大图或者多...
支持h5,pc端的和手机端的触底刷新插件.zip
07-27
"支持h5,pc端的和手机端的触底刷新插件.zip" 提供了一个解决方案，允许用户在浏览内容时实现无缝的下拉刷新功能，无论是使用个人电脑还是移动设备。这种技术提高了用户体验，因为它使得用户能够轻松获取更多内容，而...
如何限制电脑PC端访问Web页面只能手机端才能访问
04-21
标题“如何限制电脑PC端访问Web页面只能手机端才能访问”所涉及的知识点主要涵盖以下几个方面： 1. **设备检测**： - **User-Agent检查**：最常用的方法是通过服务器端或客户端JavaScript检测请求头中的`User-...
HTML5手机端三级联动城市选择代码
07-03
HTML5手机端三级联动城市选择代码是一种常见的网页交互设计，主要应用于移动设备上的地理选择功能。...在实际项目中，开发者可能还需要整合现有的前端框架（如React、Vue或Angular）来进一步提升开发效率和代码复用性。
Vue--移动端开发
郑怪兽
08-23 2404
移动端开发 我们现在关注的点还在移动M站上，或者我们可以叫做webapp，其实就是运行在移动端浏览器中的web网站。 app:application应用程序。 手机软件:主要指安装在智能手机上的软件，完善原始系统的不足与个性化。 移动端开发是与PC端肯定是有很大不同的，所以我们需要学习如何在移动设备上开发完美适配的app 开发移动端应用我们需要学习的知识点可以分成如下几个： 移动端布局适配 移动端事件 移动端交互效果 移动端前端框架 移动端调试 移动端布局适配 从屏幕尺寸、屏幕类型
vue 项目在很多手机浏览器和pc浏览器打开时空白页面
tenc1239的博客
06-02 590
browserslistrc 文件。
手机端 点击弹窗跳转新页面【客户端方法新开页面】，返回时弹窗闪现
yezi_Z的博客
06-13 2111
问题描述 ： 在手机端，通过点击一个弹窗跳转新页面【客户端方法新开页面】，返回时可以看到弹窗一闪而过。 原因 ： 当用变量isShow控制弹窗的显示时。在跳转前虽然已经将isShow设置成了false，但是由于vue更新dom是异步的，所以在执行跳转动作时，当前页面dom并未渲染完成【即弹窗仍处于显示状态】。当由新页面返回时，继续dom渲染的动作，因此出现了弹窗闪现的情况。 解决思路： 等待dom...
移动端web开发初探之Vuejs的简单实战
weixin_34008784的博客
01-14 1047
这段时间在做的东西，是北邮人论坛APP的注册页。这个注册页是内嵌的网页，因为打算安卓和IOS平台同时使用。因此实际上就是在做移动端的web开发了。 在这过程中遇到了不少有意思的东西。 DEMO的github地址在这里 内容提要： meta标签Vuejs的简单实战CSS移动端全屏背景CSS移动端动画初探 meta标签 这点与在PC端写前端有着很大的区别，移动端的meta标签简直多。我就说说我所用到的...
vue适配手机端网页面需要的html配置
清龙入海的专栏
03-01 901
尝试在最外层的index.html中添加： 这样，在手机上就不会因为缩放导致页面显示不正常了。
vue h5手机页面适配pc
09-08
Vue H5手机页面适配PC需考虑以下几个方面： 1. 布局适配：H5页面一般采用流式布局，可以随...总之，通过合适的布局、图片、导航菜单、功能和字体字号适配，可以让Vue H5手机页面在PC上呈现出更好的效果和用户体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值