微信第三方网页中position：fixed失效

最新推荐文章于 2023-03-29 10:25:19 发布

种花家耶

最新推荐文章于 2023-03-29 10:25:19 发布

阅读量864

点赞数

分类专栏： CSS爬坑日记

本文链接：https://blog.csdn.net/qq_21026377/article/details/82492612

版权

CSS爬坑日记专栏收录该内容

0 篇文章 0 订阅

订阅专栏

问题：微信中通过网址访问网页，头部设置了固定在顶部，却在安卓手机中会随着页面滚动
解决：在html头部添加如下代码

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

参数详解：

width：device-width 网页的宽度等于设备的宽度

minimum-scale = 1.0 网页最小缩放比例为1.0

maximum-scale = 1.0 网页最大的缩放比例为1.0

user-scalable = no 允许用户缩放，yes表示允许，no表示不允许

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

种花家耶

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

ios fixed定位bug位置偏移

AIGC大前端小王子

10-30

1679

本文主要介绍移动端input获取焦点时，IOS固定定位fixed失效，位置偏移。一、场景描述移动端ios下，input获取焦点时，固定定位的fixed会转化为absoult属性，滚动条滚动超过可视区域，导致位置偏移。二、解决方案 2.1将fixed的定位与滚动区域分离成2个部分 2.2滚动区域做absoult布局三、CSS代码 .nav-wrapper{ // 顶部fixed布局 ...

微信小程序开发——scroll-view里边放fixed元素后样式错乱

张静的博客

03-14

1万+

问题描述： scroll-view,里面的自定义组件中包含一个fixed弹框，但这个弹框无论怎么设置层级，只能显示在当前scroll-view的有效宽度内。安卓、开发工具都正常。ios不行。原因：因为 iOS 下加了 -webkit-overflow-scrolling: touch，这个会产生滚动惯性，体验更好，但会改变 fixed 的行为，建议不在 scroll-view 里有 fixed 元素解决：将scroll-view标签改为view，并设置样式： overflow-x: hidden

参与评论您还未登录，请先登录后发表或查看评论

微信position: fixed的坑及解决之道

凝视深渊

10-18

1万+

文章目录问题描述解决之道思路和踩的坑思路：踩坑（不完美/无效的解决方案）：问题描述安卓手机上，微信环境下上传完图片后，position: fixed 的导航栏在上下滚动页面的时候出现了抖动的情况，抖动完回到原位。 ios上没测，但搜索问题的过程中发现有人反应IOS微信环境下position:fixed也有抖动的问题。解决之道页面结构是： <div id="#app"></...

安卓，ios，微信html5,position:fixed无效，会动。

wocaonima332的博客

05-25

6425

安卓微信，顶部position:fixed无效，会随着下面一层的div滚动而滚动，虽然最后回到他的位置上，但是由于一直摇晃，很刺眼，非常影响用户体验。

position:fixed实现div始终位于浏览器中固定位置

weixin_34315485的博客

11-20

336

position:fixed实现div始终位于浏览器中固定位置，代码实现：<div style="display: block; position: fixed; left: auto; left: 8px; margin-left: 0px; top: 50%; bottom: auto; margin-top: -50px;">测试div：left</d...

解决ios、微信移动端的position: fixed; 支持性不好的问题 && 禁用下拉暴露黑底的功能...

weixin_33968104的博客

06-04

165

解决ios、微信移动端的position: fixed; 支持性不好的问题　　在chrome中的多个部分使用了position: fixed之后，都可以正常的布局，但是放在微信上却出现了不能正常显示的问题（第一个问题）。　　并且使用了postion: fixed; 的一个种类名称栏在微信下下滑不了，而body是可以的，确实让人很郁闷（第二个问题）。　　对于第二个问题，我们可以采取的方...

微信小程序苹果ios固定定位position:fixed失效bug

热门推荐

鎏嫣宫守护的博客

12-29

8万+

昨天2017的微信公开课pro如期进行了，小程序将于2017年1月9日对个人开放，公司项目的demo版做了个大概，过程中花的时间最多的还是页面布局，所以后面将花一段时间将css的属性在小程序里过一篇，虽然小程序里面对于css支持，但没有说明支持到什么地步。今天就先来说说定位。一.定位：position属性允许你对元素进行定位。二.定位机制：有三种：普通流，浮动流，绝对定位。三.定位属性

微信小程序----position:sticky

12-20

在微信小程序开发中，`position:sticky` 是一个非常实用的CSS样式，它结合了`position:relative`和`position:fixed`的特点，用于创建元素的粘性定位。这个特性允许元素在滚动到特定位置时固定在屏幕的某个位置，从而...

小程序fiexd定位后sroll-view失效

゛Pudding

11-19

149

1、wxml部分 <view class="cont"> <scroll-view scroll-x class="nav classify" scroll-with-animation scroll-left="{{scrollLeft}}"> <view class="item {{index==TabCur?'cur':''}}" wx:for="{{productCategories}}" wx:key

使用css transition属性实现一个带动画显隐的微信小程序部件

09-27

position: fixed; width: 100%; height: 300rpx; left: 0; bottom: -300rpx; text-align: center; line-height: 300rpx; box-shadow: 0 1px 10px #aaa; } .mask-con-show { bottom: 0; } ``` 通过JS来...

微信小程序 position: absolute位置错乱问题

huyuchaoheaven的专栏

08-27

9000

界面效果：碰到的问题：子布局设置position: absolute，解决办法：子布局的父布局一定要设置position: relative。如果父元素不加这个属性就会再往外面一层，如果外面一层还未找到relative就继续向外最终相对于body。找到哪一层有relative，就相对于那个父布局。父布局： position: relative; width...

微信小程序中position:fixed不起作用

xiaosheng

10-09

3919

微信小程序中，position:fixed不能和wx.createAnimation一起用，如果放在一起使用的话，position:fixed会不起作用

微信小程序中的position问题

WickedDogg的博客

04-21

1万+

如果同时将一个position不为static的容器内的多个块position设置为absolute，开发者工具和安卓端会正常表现，即从容器左上角开始算起，依据设置的top，right，bottom，left来定位，像下面这样而在测试ios时候，表现有所差异，如果只设置某一边，比如说我设置了蓝块的top=0，黄块的bottom，那么我们期待的应该是这样表现但实际上在ios上测试的时候出现了这样的情况

微信小程序：position: fixed导致的滚动时页面元素不跟着动的问题

测试0901-1

05-25

3983

由于对js的不熟悉，花了近半个小时才解决这个问题，现在记录下： nofixed.gif 项目需要如上图所示的一个列表页面，唰唰唰...没花多长时间就完成了,在元素较少时，不需要滚动，使用一切正常；后来添加了更多的item后，页面需要滚动，但是滚动的效果感觉莫名其妙，如下图： fixed.gif OMG？？？居然有部分元素不随着...

关于微信公众号内嵌H5遇到的底部定位Fixed出现错位的情况

xjf18250534957的博客

08-16

3218

.main { display: block; overflow: auto; height: 100%; padding: 0.86rem 0 1.14rem 0; -webkit-overflow-scrolling: touch; } <section class="uploadPhoto main"> <div class="main_inner"&gt...

微信第三方登录原生实现：快速入门指南

“微信第三方登录(原生)demo【必看篇】是关于如何在ecstore框架上实现微信原生第三方登录的教程。教程适合新手学习，通过一个简单的DEMO演示了整个流程，包括微信开放平台的注册、资质认证、应用创建、审核以及处理...