首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

实战 | 移动端如何让页面强制横屏

最近公司要开发一个移动端的养成类网页游戏(就是用手点各种按钮最后你会找到一个女朋友=。=),要求横屏显示,不能竖屏。 有经验的你肯定知道,当用户竖屏打开时,提示说你要把手机转过来是在是件很蠢的事情。...那么现在我唯一能想到的解决办法,就是在竖屏模式下,写一个横屏的div,然后把它转过来。 好了我的测试页面结构如下: 很简单对不对,最终的理想状态是,把lol非常和谐的横过来。...好了来看看区分横屏竖屏的css: 说白了,是要把print这个div在竖屏模式下横过来,横屏状态下不变。所以在portrait下,没定义它的宽高。会通过下面的js来补。...在这里我们先取得了屏幕内可用区域的宽高,然后根据宽高的关系来判断是横屏还是竖屏。如果是竖屏,就把print这个div的宽高设置下,对齐,然后旋转。...最终效果如下: 竖屏 横屏 最后,这么做带来的后果是,如果用户手机的旋转屏幕按钮开着,那么当手机横过来之后,会造成一定的悲剧。

4.9K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Flutter 如何禁止手机横屏

    问题引出 群友发来问题: Flutter 怎么禁止横屏显示呀,网上说的几个方法 都没有效 群友遇到问题,就要群友去帮助,这样,这个群就有了存在的意义。...正文 在一些特定的 App 里,我们不希望手机横屏的时候,App 发生旋转,在 main 函数里,像下面这样设定,就可以做到全局禁用横屏模式了。...Portrait 模式 DeviceOrientation.portraitDown, // DeviceOrientation.landscapeLeft, // 横屏 Landscape...,比如打开网页,也就是在WebView 的场景下,是可以横屏的,但是在其他界面下不可以横屏。...比如在我的代码里,我把 WebView 专门封装了一个页面,叫 WebPage,这样设定后,当用户进入网页的时候,可以横屏,但是退回后,就会强制恢复竖屏。

    2.7K20

    iOS 全局禁止横屏,但视频播放界面选择性横屏的解决办法

    有时我们的APP并没有适配横屏的需求,但是在个别视频播放界面,我们需要在播放视频的时候横屏,退出全屏的时候不能横屏,但是有时候并没有原生API并没有给出解决方案。...当其他界面不支持横屏时: 这个解决方法比较容易 在 APPDelegate.h 文件中增加属性:是否支持横屏 /*** 是否允许横屏的标记 */ @property (nonatomic,assign...)BOOL allowRotation; 在 APPDelegate.m 文件中增加方法,控制全部不支持横屏 - (UIInterfaceOrientationMask)application:(UIApplication...,我们只要控制 allowRotation 这个属性就可以控制其他界面进行横屏了。...= (AppDelegate *)[[UIApplication sharedApplication] delegate]; appDelegate.allowRotation = YES; //不让横屏的时候

    4K20

    移动端触屏事件

    触屏事件概述 移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。...触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。 常见的触屏事件如下: ? 2....触摸事件对象(TouchEvent) TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。...和targetTouches 列表 //但是会有changedTouches 因为平时我们都是给元素注册触摸事件,所以重点记住 targetTocuhes 3.案例:移动端拖动元素...touchstart、touchmove、touchend可以实现拖动元素 但是拖动元素需要当前手指的坐标值 我们可以使用  targetTouches[0] 里面的pageX 和 pageY 移动端拖动的原理

    2.9K30

    Unity 移动端触摸屏操作

    Unity 触屏操作 当将Unity游戏运行到IOS或Android设备上时,桌面系统的鼠标左键可以自动变为手机屏幕上的触屏操作,但如多点触屏等操作却是无法利用鼠标操作进行的。...Unity的Input类中不仅包含桌面系统的各种输入功能,也包含了针对移动设备触屏操作的各种功能,下面介绍一下Input类在触碰操作上的使用。...自最后一帧所改变的屏幕位置 phase 相位,也即屏幕操作状态 其中phase(状态)有以下这几种: Began 手指刚刚触摸屏幕 Moved 手指在屏幕上移动...Stationary 手指触摸屏幕,但自最后一阵没有移动 Ended 手指离开屏幕 Canceled 系统取消触控跟踪,原因如把设备放在脸上或同时超过5...个触摸点 下面通过一段代码来进行移动设备触摸操作的实现: using UnityEngine; using System.Collections; public class AndroidTouch

    3.1K20
    领券