`
wanghailiang333
  • 浏览: 199552 次
  • 性别: Icon_minigender_1
  • 来自: 广西
社区版块
存档分类
最新评论

解决position:fixed;在android webkit 不起作用的问题

阅读更多

解决position:fixed;在android webkit 不起作用的问题:

 

加入如下标记

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

 

 

viewport Meta 标记

今天来说说viewport Meta标记。这个标记最开始是由苹果引进的,用来标记移动设备的浏览器的视口大小。现在,这个标记也已经被Android接受。不止如此,除了 WebKit内核的浏览器,Mozilla也接受了这个标记。据说,HTML5也将正式引入这个标记。

在<head>中,写下以下代码

<meta name="viewport" content="width=device-width; user-scalable=0;" />
就可以让您的网页适应移动浏览器的大小。

视口,和ps中的画布比较相像。

 

下面解释一下viewport的meta标记中各个参数的具体意义。

 

width
视口的宽度。可以使用像素值,但推荐使用device-width关键字。表示依照设备屏幕的宽度。

 

height

视口的高度。不用指定。

 

user-scalable

用户是否可以缩放视口。
值可以是:
1, yes, or true: 允许用户缩放
0, no, or false: 不许用户缩放


initial-scale

初始缩放值。比如1.0表示一个视口像素等于一个屏幕像素。


minimum-scale

最小比例值。范围从0至10.0

 

maximum-scale

最大比例值。范围从0至10.0

分享到:
评论

相关推荐

    移动端吸顶fixbar解决方案.docx

    - **JavaScript 模拟 `position: fixed`**:如果浏览器不支持 `position: sticky`,可以通过 JavaScript 实现 `position: fixed` 和 `position: static` 的动态切换。 - 函数节流和防抖以减少 DOM 操作频率。 - ...

    手机WEB开发

    4. **position: fixed问题**:在移动Webkit浏览器中,CSS的position: fixed不被支持,这意味着元素无法固定在屏幕某一位置。为了解决这个问题,通常需要借助JavaScript来实现类似效果。如cubiq.org提供的解决方案,...

    使用HTML5和CSS3构建基于webkit的Web-PageApp.doc

    7. 使用touch scroll, demo来模拟iPhone的scroll效果,解决Mobile Safari下不支持position:fixed的问题。 使用HTML5和CSS3构建基于webkit的Web Page/App需要注意许多细节,但它可以提供了一个快速、跨平台、美观的...

    微信H5页面兼容性解决方案 (2).docx

    - `position: fixed`:在iOS设备上,使用`position: fixed`定位的元素可能会受到软键盘弹出/关闭的影响。特别是在第三方键盘的支持下,这种现象更为明显。 #### 四、安卓弹出的键盘遮盖文本框 **问题描述:** 在...

    webapp开发利器[参照].pdf

    此外,iPhone早期版本不支持`position:fixed`,这对于某些布局设计是个挑战。 在实际开发中,使用iscroll可能遇到的问题及解决方案包括: 1. **鼠标滚轮控制不灵敏**:在PC端,iscroll的滚动可能不如鼠标滚轮自然...

    干货前端工程师面试题汇总内含题目解析和详细答案

    - 在Android设备上,某些浏览器可能存在`position:fixed;`不起作用的情况。 - 解决方案可以尝试使用`-webkit-transform:translateZ(0);`来激活硬件加速。 #### 38. **全屏滚动的原理** - 全屏滚动通常是通过CSS的`...

    前端面试题

    在非表格元素中不起作用。 - 不同浏览器对于`collapse`的支持程度和行为可能略有不同。 **18、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?** - 这些特性共同作用于元素的...

    解决vue 界面在苹果手机上滑动点击事件等卡顿问题

    例如,可能会导致position: fixed属性的元素在滚动时无法固定不动,而是跟着滚动条一起滚动。为解决这个问题,可以将fixed定位的元素(如头部导航栏)写在滑动部分的外部,并采用绝对定位的方式来布局。这样即便内容...

    移动web和响应式第2天课堂笔记1

    不同的手机可能使用不同的浏览器内核,例如Android设备通常使用WebKit内核,而一些其他设备可能使用Blink或Gecko内核。这些内核决定了如何解析和渲染CSS样式,因此开发者需要熟悉各种内核的特性,以确保兼容性。 在...

    web前端笔试面试

    ### Web前端笔试面试知识点详解 ... position:fixed在android下无效?** - 确保浏览器版本支持。 - 使用`position: sticky`作为备选方案。 **41. 动画最小时间间隔?** - 一般建议不小于`16ms`(大约60FPS)。

    最全前端面试题-2(css篇-上百篇题集整理1个月)

    【position在Android下无效处理】:可能因硬件加速导致,可以尝试关闭硬件加速或使用`-webkit-transform: translateZ(0)`触发硬件加速。 【移动端1px边框问题】:在高分辨率设备上,1px边框可能显示很粗,可以使用`...

    IOS 的弹性滚动解决方案

    - 避免在弹性滚动区域内使用`fixed`定位的元素,因为这可能导致滚动不顺滑。 - 使用CSS3的`transform`和`translate3d(0,0,0)`可以利用GPU加速,提升滚动性能。 - 当内容加载完毕后再开启弹性滚动,以避免在内容加载...

    5月最新大厂前端高频核心面试题.pdf

    position:fixed在android下可能无效的问题通常可以通过改变视窗的fixed定位为absolute定位来解决。 动画最小时间间隔应根据动画复杂度和设备性能来确定,一般推荐使用requestAnimationFrame()方法。 li元素之间的...

    详解css3 mask遮罩实现一些特效

    然而,值得注意的是,IE浏览器并不支持CSS3的mask属性,而WebKit内核的浏览器(如Chrome、Safari、iOS和Android)需要添加`-webkit-`前缀来实现兼容。Firefox浏览器虽然支持,但需要使用`webkit-mask`属性。 Mask...

    原生JS实现微信通讯录

    - `#letters` 使用了固定定位(`position: fixed`),确保它始终在屏幕右侧显示,且通过`z-index`设置层次,使其位于其他元素之上。 - `#letters li` 是每个字母项的样式,设定宽度、高度、内边距和字体大小,以...

    jquery实现吸顶导航效果

    在iOS设备上,利用CSS的`position: -webkit-sticky;`和`position: sticky;`属性,设置`top`和`z-index`,实现吸顶效果。 最后,调用`fixed(heights)`函数,传入计算好的吸顶触发点高度,使代码生效。 总结来说,这...

Global site tag (gtag.js) - Google Analytics