网页端和移动端页面展示不一样（兼容问题）

最新推荐文章于 2024-06-01 21:54:01 发布
最新推荐文章于 2024-06-01 21:54:01 发布
阅读量824 收藏 1
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45794671/article/details/120527087
版权

在网页端可以正常运行，但在移动端却出现显示不正常

改home之后出现滑动bug，然后在app.vue里面调试

将fixed定位模式修改改为相对路径，解决问题
网页认定了固定定位是窗口
移动端的话，有滚动的话，fixed属性会被影响
当父元素有transform属性时，固定定位就会收到影响

Pitcher彭
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端一套代码同时在 pc 和 手机端展示不同的效果，思路分析， css媒体查询
业余前端的职业经历
02-25 4379
如果你在公司中碰见这样的需求，用过bootstrap的童鞋 肯定上来会想到 boot 如果一套代码 在 同一个域名下 同时能在手机和移动端运行 让客户看到一样的内容 不一样的效果 1. 如果页面复杂的话 一套代码两个样式 判断用户在那种设备中打开的然后跳转到指定的 网站类型上 就像百度那样 有两个网站 m.baidu.com // 是手机站 www.baidu.com // 是pc站 2. 如果页面简单地话 可以使用 css3 的媒体查询 <me...
浏览器和手机显示不同样式
不回头的博客
04-01 491
浏览器和手机显示不同样式思路开工结束 思路 1、浏览器和手机引用不同的css文件; 2、js动态更新样式; 开工 1、不是专业前端，这里就不班门弄斧了，引用不同样式方式直接查到一个别人的，看起来挺好，点击查看 2、js动态更新方式，简单记录一下： PS：我这里直接根据屏幕尺寸判断的，做法很粗糙，但是大概思路是这样，屏幕尺寸大于一个值，设置一个样式，小于、等于、或者多写一些判断、等等，可以设置很多尺寸的不同样式！ $(function(){ if(screen.width>500){
关于前端代码移动端的适配方案
最新发布
qingwan_91的博客
06-01 1330
前端代码在移动端的适配方案
chrome调试过移动端后再调试pc端缩放不正常
dandelionoooo的博客
08-07 2052
浏览器在调过手机端后缩放变成30%,把缩放调到100%就好了
Vue 手机测试vue移动端项目(电脑修改，手机即可看到效果)
有问题可关注公众号：前端研究院 后台输入问题回复
03-20 1457
1：获取电脑网络ip地址（注意：手机端与电脑端需在同一无线局域网下，可电脑连接手机热点） 命令行输入：ipconfig 回车后获取到ip地址： 如图中的172.20.10.4 2：将获取到的地址替换项目中的http：localhost：8080地址 具体步骤：打开项目中的package.json文件，将红色部分代码段 "scripts": { "dev": "webpack-dev-s...
如何让移动设备的宽与浏览器视图的宽保持一致
weixin_30856965的博客
05-07 166
　　使用meta标签 在head标签里面加上这一句； 　　<meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 　　如果想让页面，移动设备，浏览器的宽保持一致，就需要我们自己调了，通...
移动端页面（弹性盒模型布局）
08-23
在移动端页面设计中，弹性盒模型布局（Flexbox Layout）是一种强大的工具，它极大地简化了复杂的多列布局问题。此布局模式允许元素在容器中灵活地调整大小和位置，无论屏幕尺寸如何变化，都能保持良好的视觉效果。在...
可以访问手机端页面的浏览器
04-10
"可以访问手机端页面的浏览器"就是为满足这种需求而设计的软件工具，它能够让用户在桌面设备上享受与手机一样的网页浏览体验。这款浏览器的特色在于其优化了显示模式，能够适应各种手机网站，解决了小屏幕设备上观看...
手摸手，带你实现移动端H5瀑布流布局.doc
07-08
移动端H5瀑布流布局技术 ...移动端瀑布流布局是一种非常流行的网页布局方式，具有很多优点和特点，适合在移动端H5页面底部使用，可以降低页面复杂度，节省空间，可以容纳更多内容，提高用户体验。
移动端（微信等使用vConsole调试console的方法
10-17
通过vConsole，开发者可以在移动端轻松地进行JavaScript调试，这对于优化用户体验、解决设备兼容性问题以及提高开发效率具有重要意义。记住，vConsole不仅适用于微信环境，也可以用于其他任何移动端浏览器，只要它们...
移动端吸顶fixbar的解决方案详解
01-19
在PC端主要的实现是通过 CSS 的 position: fixed 属性，但是在移动端，尤其是在安卓端，存在诸多的兼容性问题。 问题 position：fixed给移动端带来的问题： IOS8在页面滚动时，吸顶不连续；页面滑动时，不见吸顶，...
关于H5页面适配的问题
qq_27970999的博客
02-26 5923
 1.问题描述  适配的目标：在不同尺寸的手机设备上，页面“相对性的达到合理的展示（自适应）”或者“保持统一效果的等比缩放（看起来差不多，但不是完全等比例，对于字体我们并不喜欢等比例的去放缩）”。 问题:手机设备的尺寸不同，让页面在不同的手机设备上显示的效果看起来大致相同或者展示效果比较合理就成了一个问题。 目前移动端比较通用的几个方案 媒体查询和rem 适配 viewport 缩放,...
那些H5在Android和IOS上出现的丧心病狂的坑
热门推荐
SamYoc-Winter的专栏
07-14 3万+
首先得强调一下，H5和移动设备的交互遇到的问题真的是各种丧心病狂！！但是本主依然还是耐着极大的兴致（无奈）的做了下去。 H5页面在Android或者IOS上运行出现问题（这里的运行指的是h5的页面运行在App里的webview里），测试人员或者上级领导那是直接剑指前端人员，那是各种嘶声力竭的吐槽和追问。啊！为什么会有这些问题！你看你写的真是水！！前端人员一脸憋屈，有苦难言，一口老血闷在心中。
vue等比例缩放网页，在手机QQ，微信浏览器样式错乱问题
yqlnihao的博客
11-21 655
/在头部加meta标签。
ApiPost使用时的一些坑
小太阳DENGJIE的博客
07-16 4317
国内的接口文档管理工具
解决vue移动端适配问题
明月如霜丶
02-21 9260
1，先看看网上关于移动端适配讲解 再聊移动端页面适配，rem和vw适配方案！ 基础点：rem相对根节点字体的大小。所以不用px; 根字体：字体的大小px; px：你就当成cm(厘米)这样的东西吧； 基准：750设计稿； 这是方案的基础理论，在这个基础上，我们还要搞明白，到底要干一件什么事情！ 目标一、手机适配：就是页面上的尺寸，无论高度，还是宽度，还有字体，随屏幕的宽度变化！这里是屏幕宽度！是不是...
前端开发如何使得PC端和手机端的页面效果不一样
别人笑我太疯癫，我笑他人看不穿。
06-07 2645
做前端的要知道一个常识，涉及样式的控制组件是css，而js是加强样式的渲染效果的，因此实现这一效果的方法是导入样式的时候控制样式的生效条件，使得用户打开网页的设备不同而展示的效果也不同的效果，在使用link的时候，它有一个标签属性为media，它就是用来控制外链的样式在使用哪种设备访问时生效，我们可以使用它的screen值表示移动设备访问时生效，并添加一些大小的限制 当希望智能手机访问时生效，我们可以控制页面分辨率最大宽1024px，大于这个值就不生效了 media="screen and (max-wid
PC端和手机端入口一致，跳转不同格式页面的解决方案
Dai_Haijiao的博客
05-18 1799
如：PC端接口请求后跳转到jsp页面，手机端请求接口后跳转到html页面，两个客户端公用一个入口（index.do）。 // 跳转首页 @RequestMapping(value = "/index.do", method = RequestMethod.GET) public String toIndex(HttpServletRequest req, HttpServletResp......
htmlpc端和移动端页面的转换
06-06
1. 响应式设计：通过CSS媒体查询、弹性布局等技术，让页面能够在不同屏幕尺寸下自适应展示，从而达到在PC端和移动端都能有良好的视觉效果。 2. 移动端适配：通过针对不同移动设备的CSS样式设置、viewport的调整等...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值