阶段总结，移动端横竖屏切换、阻止长按默认行为、css控制footer固定在底部

最新推荐文章于 2023-06-12 17:55:33 发布
最新推荐文章于 2023-06-12 17:55:33 发布
阅读量730 收藏 1
点赞数
分类专栏： 样式 文章标签： 横竖屏 长按 固定 底部
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/denl0918/article/details/71215069
版权
本文总结了移动端应用中如何监听横竖屏切换的事件`orientationchange`，并提供了禁止UC和QQ浏览器横竖屏切换的meta标签解决方案。此外，探讨了通过CSS实现内容不足时footer自动固定在页面底部的方法。
摘要由CSDN通过智能技术生成
1、横竖屏切换
属性：window.orientation： 90/-90 横屏; 0/180 竖屏

事件：orientationchange

禁止移动端横竖屏切换：（微信中无效）

<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait"/>
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait"/>

2、阻止长按默认行为
android&
最低0.47元/天 解锁文章
龙哥_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端触摸相关事件踩坑（touchmove默认事件以及passive）
qq_44880532的博客
10-19 7621
移动端移动事件监听（touch、默认行为） 最近在写一个移动端网页中会遇到滑动事件监测问题，来解决用户在canvas画布中移动效果 touchmove.默认触发事件e.preventDefault（）没有生效. 会导致用户在滑动canvas时会出现移出网页 以及在安卓手机下.瞬间滑动会触发三个事件stat->move->end 三者 但是在长按之后会发生一个奇怪的现象,canvas脱屏造成半片区域空白 -->其实也是move中没有阻止默认事件的原因所致的 this.mycanvas
利用CSS使footer固定在页面底部的实例代码
09-24
在网页设计中，保持footer始终固定在页面底部是常见的需求，尤其在内容不足填满整个屏幕时，确保footer不会上浮。本实例将通过CSS实现这一功能，主要涉及的CSS属性包括`margin`, `height`, `min-height`, `position`...
landscape:让移动端网页横竖屏切换时给一个友好提示
05-08
Landscape 用户在旋转手机屏幕为横屏时给一个友好的提示，不必考虑横屏的布局，同时减少开发维护成本提升用户体验。 Demo 用法 [removed][removed] [removed] (function () { new landscape({ mode: 'portrait', prefix: 'shine' }); })() [removed] 参数 pic : 图片地址, 可以是图片 URL, picZoom : 图片缩放比例 如 2, mode : [*必填] 页面模式, 'portrait': 横屏提示, 'landscape': 竖屏提示, bgcolor : 背景色,如 '#000', txt : 提示文字, 如 '
移动端禁止默认行为
m0_60703077的博客
03-08 481
全面禁止默认行为 在移动端上，文字默认会被选中，会使用浏览器默认的滚动条，有默认的右键菜单。那么怎么才能禁止呢? 禁止方式 document.addEventListener('touchstart', function (ev ) { ev = ev || event; ev.preventDefault(); }) 这样子就可以了，那么怎么才能知道是否可以阻止默认事件？ ev.cancelable; 那么我们阻止了默认行为，怎么才能单独的使用？ 如果我们不想在 document
移动端长按禁止默认事件总结
Kris的博客
07-06 5734
1、如果是禁用长按选择文字功能，用 css : 全局* 或者 局部选择相映的DOM加 * { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -m...
禁止手机APP屏幕切换的实现
Elise1的专栏
03-08 1926
在AndroidManifest.xml中相应Activity下进行android:configChanges="orientation|keyboardHidden" android:screenOrientation="portrait" 设置 该android:screenOrientation属性，他有以下几个参数： "unspecified":默认值 由系统来判断显示方向.判定的策略
移动端遇到的兼容问题或者不好的默认行为
chili_fan的博客
10-28 364
html5在低版本浏览器如何兼容（ie8）? 解决：引入html5shiv.js 只要做移动端的项目，必须要加入meta 强制让文档与设备的宽度保持1：1,对页面设置不能进行缩放： <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 移动端中的图片会出现模糊的现象 由于手机分辨率小，如果按照..
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
12-14
把 footer 区固定在底部，无论页面高度多宽，它始终在底部不会变，就像移动端的菜单一样。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>document</title> &...
纯css 实现footer 一直在页面底部，不随页面滚动
09-25
CSS的简单在于它易学，CSS的困难在于寻找更好的解决方案。在CSS的世界里，似乎没有完美这种说法。所以，现在介绍的CSS绝对底部，只是目前个人见过的方案中比较完美的吧。
移动端固定输入框在底部会被键盘遮挡的解决方法(必看篇)
08-28
移动端固定输入框在底部会被键盘遮挡的解决方法 移动端固定输入框在底部会被键盘遮挡的解决方法是移动端开发中常见的问题。该问题的出现是由于键盘弹出时，会将固定输入框挡住，导致用户无法 vedere 输入框的内容。...
横竖屏切换的屏蔽、捕获，及防止Activity的销毁
ACU的专栏
08-28 2980
//------  背景     在Android中 如果发生了横竖屏的切换 在默认的设置下是十分悲剧的 因为他会销毁你的Activity 再重新调用onCreate方法生成这个Activity 若是我们有动画在播放 就会重新播放 如果我们有表格正在填写 就必须要重填 因而 屏蔽横竖屏切换或者防止Activity的销毁就显得格外重要     在网上看了太多帖子 都不是很清楚嘛 折腾了我一个晚上
阻止事件默认行为
weixin_42180591的博客
01-04 136
方式一 e.preventDefault() 方式二 通过给click添加修饰符的方式 @click.prevent
移动端禁止图片/文字长按默认行为
折月的博客
11-10 804
移动端禁止图片/文字长按默认事件
Uniapp(H5)-横竖屏切换,监听窗口尺寸禁止横屏
Backbody_的博客
06-12 1875
uniappH5小程序禁止横屏
【前端】禁用移动浏览器长按默认事件
weixin_38792911的博客
09-17 3903
转载：H5移动端禁止长按弹出系统菜单"选择复制",“在浏览器打开” 移动端长按事件自定义的时候会和各种浏览器自带的长按默认事件冲突，所以禁止掉浏览器自带的长按事件 *{ -webkit-touch-callout:none;/*系统默认菜单被禁用*/ -webkit-user-select:none;/*webkit浏览器*/ -khtml-user-select:none;/*早起浏览器*/ -moz-user-select:none;/*火狐浏览器*/ -ms-user-select:none
阻止移动端H5开发浏览器默认左右滑动行为
热门推荐
qq_37028216的博客
03-07 2万+
Touch事件小知识 1.避免点击300ms延迟 css： *{ touch-action: manipulation;} 正题:如何解决H5移动端开发浏览器默认左右滑动事件 在进行移动端开发时,由于浏览器自带的滑动行为，使手指只要左右滑动页面就可以上一页，下一页的跳转，体验可以说是十分的不好。为了解决这个问题，我在网上进行了一番搜索以及一番尝试得出了下面两种方法。现在就下...
取消事件默认行为（移动端）
weixin_30685047的博客
05-11 145
在编写功能时，遇到一个很有意思的事情，后来经过思索就解决了这个问题。 这个功能的需求是点击一个按钮，弹出对话框，其他部分笼罩一层灰色，点击灰色后弹出框消失，如果只是这样就比较好实现，但还有其他需求，那就是这个按钮所在的这个整体内容，点击它之后会进入另一个页面，所以我的思路是使用事件冒泡，判断是点击了按钮还是内容的其他部分来决定是弹出对话框还是进入另一个页面，在点击弹出...
移动端web app 全面禁止事件默认行为--解决a标签跳转问题
qq_43254688的博客
01-16 2969
1.全面禁止事件的默认行为： &lt;script type="text/javascript"&gt; window.onload = function () { document.addEventListener('touchstart',function (ev) { ev = ev || event; ev.preventDefault() })...
footer固定在底部
最新发布
10-18
要让 footer 固定在底部，可以使用 CSS 的 flex 布局。具体实现方法如下： 1. 在 HTML 中，将整个页面的内容包裹在一个 div 容器中，例如： ```html <body> <div class="container"> <!-- 页面内容 --> </div> <footer>版权信息</footer> </body> ``` 2. 在 CSS 中，设置容器为 flex 布局，并将其高度设置为 100vh（视口高度），例如： ```css .container { display: flex; flex-direction: column; min-height: 100vh; } ``` 3. 将页面内容的容器设置为 flex-grow: 1，使其占据剩余的空间，例如： ```css .container > *:first-child { flex-grow: 1; } ``` 4. 最后，将 footer 设置为固定在底部，例如： ```css footer { position: fixed; bottom: 0; width: 100%; } ``` 这样就可以实现让 footer 固定在底部的效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值