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

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

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

4.9K30

移动使用CSS或JS判断和竖的讲解

移动中我们经常碰到的问题,那么我们应该如何去判断或者针对、竖来写不同的代码呢。...4)、手机页面可以触摸移动,但是如果有需要禁止此操作,就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。...; } }, false); //移动的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在还是竖状态。...--css媒介查询判断-- @media (orientation: portrait) { } @media (orientation: landscape) { }竖 进入网页检测是否状态...还好这个项目是网页内嵌app中,app有方法强制网页,改了改页面,交上去了。

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

    移动事件

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

    2.9K30

    iOS将单个控制器设为、页面

    最近项目中拍照页面需要设置为,需求如下 进入拍摄页面后将页面强制设为,拍照结束后回复竖。 简述为:A->B() 屏幕快照 2016-07-29 下午5.50.02.png 1....在需要设置的页面中添加下列方法 /** * 设置屏幕旋转 * * @param restriction yes or no */ - (void)restrictRotation:(BOOL...UIInterfaceOrientationPortrait]; [[UIDevice currentDevice] setValue:value forKey:@"orientation"]; } 实现了将单个控制器设为的功能...但是,新的问题出现了:当B控制器返回A时,A控制器页变也为(需要将手机转向才能恢复) 解决办法很简单: 在A控制器的-(void)viewWillAppear:(BOOL)animated方法中添加...,再次设为竖即可 NSNumber *value = [NSNumber numberWithInt:UIInterfaceOrientationPortrait]; [[UIDevice currentDevice

    2.6K50

    Unity 移动触摸操作

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

    3K20

    HTML5中判断

    移动中我们经常碰到的问题,那么我们应该如何去判断或者针对、竖来写不同的代码呢。...4)、手机页面可以触摸移动,但是如果有需要禁止此操作,就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。...一:CSS判断 写在同一个CSS中 @media screen and (orientation: portrait) { /*竖 css*/ } @media screen...) { /*竖 css*/ } @media screen and (orientation: landscape) { /* css*/ } <link rel="stylesheet...; } }, false); //<em>移动</em><em>端</em>的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在<em>横</em><em>屏</em>还是竖<em>屏</em>状态

    4.6K40

    iphone相册打开是_苹果手机相册变成怎么办

    最近开发ipad的时候,项目必须,这时候调用相册的时候app就奔溃了 问题所在: 系统的相册只支持竖打开,如果你的app设置了只能,就会冲突,打不开相册,程序会崩溃。...方法: 1.写了一个管理的单例类 DeviceDirectionManager 里面有3个方法,(1).是否是。...(2).设置.(3).设置竖 2.在appDelegate 里面 – (NSUInteger)application:(UIApplication *)application supportedInterfaceOrientationsForWindow...:(UIWindow *)window { //判断是否是 if ( [[DeviceDirectionManager getInstance] isHorizontal]) {...[self presentViewController:picker animated:YES completion:nil]; } } 4.选择结束或者取消选择的时候,都设置屏幕方向为

    2.2K20

    Flutter 如何禁止手机

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

    2.7K20

    Android编程判断、竖及设置横竖的方法

    本文实例讲述了Android编程判断、竖及设置横竖的方法。...分享给大家供大家参考,具体如下: 还是这个手机项目,有一个需求是整个工程中只有刚进去的界面允许显示,并且要将该界面的标题隐藏,当切换回竖显示的时候,标题变为可见,一开始我百度了一下有一个监听activity...是否的监听函数,如下: // 橫不重新加載activity,調用該方法 @Override public void onConfigurationChanged(Configuration newConfig...,就将标题隐藏,竖的时候就显示,逻辑上看似没错,当我虚拟机测试的时候感觉都没问题,过了好几天,测试反馈来一个很奇怪的bug,描述如下: 测试人员测试的时候,并没有按照常规竖进入主界面,而是调皮的一直从登陆界面进入的...出现的问题所在,在于onConfigurationChanged监听方法,是在屏幕切换之后才会执行的,当测试人员已进入的时候,根本就没有进入这个函数进行隐藏操作,而且当进入的时候,宽度也就是手机的高度

    2.6K30

    Android屏幕旋转之切换的实现

    刚实现了App内手机/竖放置时,屏幕/竖的切换。记录一下中间需要的关键信息和实现过程。.../竖的影响 SCREEN_ORIENTATION_REVERSE_LANDSCAPE 另一个方向的 SCREEN_ORIENTATION_REVERSE_PORTRAIT 另一个方向的竖(倒拿手机...) SCREEN_ORIENTATION_SENSOR 重力传感器影响屏幕的方向0/90/270° SCREEN_ORIENTATION_SENSOR_LANDSCAPE 始终,由重力传感器决定是哪个方向的...reverseLandscape API 9 以上,反向 reversePortrait API 9 以上,反向竖 sensorLandscape API 9 以上,,但是可以根据 物理方向传感器来切换正反向...MCC mnc IMSI移动台的网络代码(MNC)发生变化——一个SIM被探测到并且更新MNC locale 区域发生变化——用户选择了一个文本需要显示的新语言 keyboard 键盘类型发生变化——例如

    7.1K40

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

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

    3.9K20
    领券