移动端强行横屏

最新推荐文章于 2024-03-14 09:24:03 发布
最新推荐文章于 2024-03-14 09:24:03 发布
阅读量246 收藏
点赞数
分类专栏： css 文章标签： css html5 html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42717601/article/details/107014172
版权

横屏的使用

.c-box {
	width: 100vmax;
	height: 100vmin;
	transform-origin: top left;
	transform: rotate(90deg) translate(0, -100vmin);
}

用这个来实现强行横屏，也会出现很多的问题，比如在iPad上用overflow: auto;的话会导致滑动不精准，或者卡顿，-webkit-overflow-scrolling: touch;因此需要加上这个属性来解决他的一个卡顿的问题。

单位的使用

这个是vmax和vmin的单位
点击这里查看vmax和vmin的使用

第一次写博客，有什么问题请指出，感谢。

快乐止于安静
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端横屏/强制横屏
ZDM_9999的博客
04-15 1840
可以使用JavaScript的`window.orientation`属性来判断当前屏幕的方向，其中0表示竖屏，90表示向左横屏，-90表示向右横屏。需要注意的是，由于不同浏览器对`orientationchange`事件的支持可能不同，因此建议在事件处理函数中加入对`resize`事件的监听，以便在浏览器窗口大小发生变化时也能正确地更新样式。在以上代码中，当屏幕为横屏时，会给``元素添加`landscape`类，从而触发CSS中定义的横屏样式。当屏幕为竖屏时，则会移除该类，恢复默认样式。
让移动端网页强制横竖屏
08-10
让移动端网页强制横/竖屏
移动端如何让页面强制横屏
01-16
有经验的你肯定知道，当用户竖屏打开时，提示说你要把手机转过来是在是件很傻×的事情。这时如果用户没开启手机里的横屏模式，还要逼用户去开启。这时候用户早就不耐烦的把你的游戏关掉了。
前端开发之移动端强制横屏示例
万少博-FE
06-21 2299
*最新更新时间：2019年06月21日13:37:53 《猛戳-查看我的博客地图-总有你意想不到的惊喜》 本文内容：移动端强制横屏显示 概述 运行示例代码即可查看效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移动端d...
移动端网页版强制横屏实例
08-23
在移动端网页开发中，有时我们需要实现特定场景下的横屏显示，比如游戏、视频播放或一些特殊应用界面。本文将详细讲解如何实现移动端网页版的强制横屏功能，并确保即使手机设置为自动旋转，也能适应并保持横屏状态。...
uniapp的移动端h5的横屏电子签名
06-01
自定义一个h5页面，实现可以横屏手写电子签名的功能，且支持回显（图片可以转化为签字版的canvas，且支持在此基础上继续进行手写签名）由于uniapp微信小程序支持横竖屏切换配置，但是移动端h5不支持。自定义一个h5...
移动端横屏的JS代码(beta)
10-22
主要介绍了移动端横屏的JS代码(beta) 的相关资料,需要的朋友可以参考下
JS检测移动端横竖屏的代码
10-22
主要介绍了JS检测移动端横竖屏的代码,非常不错具有参考借鉴价值，需要的朋友可以参考下
移动端 横屏处理
qq_37672347的博客
01-16 203
detectOrient() { var width = document.documentElement.clientWidth var height = document.documentElement.clientHeight var $wrapper = document.getElementById('vhtml') var style = '' if (width ...
移动端横屏竖屏切换和弹出键盘导致底部固定菜单出现问题解决方案
l4481259k的博客
12-14 1354
移动端键盘弹出导致底部样式上移
移动端虚拟键盘遮挡页面输入框等元素的解决方案
Quiet-Night的博客
07-05 1万+
遮挡
移动端-浏览器设置全屏方法
qq_34648151的博客
11-27 1万+
移动端-浏览器设置全屏方法，解决移动端浏览器底部盖住页面 移动端浏览器，在做移动端页面的时候，移动端浏览器底部工具栏会遮盖住页面底部弹出框，很是头疼。最终在移动端设置全屏之后，达到想要的效果。以下是设置全屏的方法，以供大家解决遇到的问题。 ...
vue项目实现pc和移动端长图拖拽+鼠标滚动横向滑动查看
weixin_62216253的博客
11-03 1153
我的图片是进入页面定位在最右边，向左拖拽查看图片。 vue项目 拖拽 鼠标滚轮横向滚动
当前端遇见了强制横屏签字的需求...
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
12-22 236
作者：爱泡澡的小萝卜原文：https://juejin.cn/post/7260697932173590565序言人的一生就是进行尝试，尝试的越多，生活就越美好。——爱默生在前一阶段的工作中，突然接到了这个需求：_手写签批的页面在移动端竖屏时强制页面横屏展示进行签字_，一开始我觉着只要将页面使用CSS3的 transform 进行 rotate 一下就可以了，但是当我尝试后发现并不是像我想象的...
vue 项目的屏幕自适应方案
热门推荐
UserGuan的博客
11-21 3万+
配置适配插件的参数（在项目根目录创建 .postcssrc.js 文件[与 src 目录平级]）在项目的 utils 下新建 devicePixelRatio.js 文件。在项目的 utils 下新建 monitorZoom.js 文件。在 App.vue 中引入并使用即可。在 main.js 中引入并使用即可。
vue 如何实现手机横屏功能
最新发布
sinat_33255495的博客
03-14 1201
一拿到这个需求很可能就被吓到了，但简单来说，就是点击横屏按钮跳转一个新页面，通过 css样式 的翻转样式来实现，主要是计算横屏的宽高比较麻烦，下面来看具体的代码实现。有些需求需要手动实现横屏功能，比如点击一个横屏的图标将整个页面90度翻转，再点击退出横屏回到正常页面。
移动端开发-禁止横屏
weixin_34116110的博客
08-21 2494
对于移动端的页面，很多时候是不希望横屏显示的，有可能横屏显示页面显示不全或者影响美观，也或者其他的方面。 然而，横屏这个功能一般在手机或手机浏览网页的app上设置，作为网页是没有权限去操作这一设置的。 那么有什么办法能解决这一问题呢？ 看成品请移步文章最后,。 看效果请点这里。 下面就简单讲讲两种方法 1. 通过判断窗口宽高值的比值判断是否横屏 对于正常手机屏幕来说，窗口宽度是...
js移动端强制横屏
06-01
你可以使用以下代码来实现在移动端强制横屏： ``` // 禁止竖屏 window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() { if (window.orientation === 180 || window.orientation === 0) { document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'; } if (window.orientation === 90 || window.orientation === -90) { document.documentElement.style.fontSize = document.documentElement.clientWidth / 13.34 + 'px'; } }, false); ``` 这段代码将在页面加载后监听 `orientationchange` 和 `resize` 事件，当屏幕方向变化时，根据当前屏幕方向设置 `html` 元素的字体大小，以达到强制横屏的效果。需要注意的是，这种方式只在移动端有效，PC 端并无效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值