手机端监听屏幕的高度

2024-11-03

vue中实时监听移动端屏幕高度（采坑后实践）

最近做微信公众号活动,需要首页往input中输入内容,点击input软键盘tabbar被顶起来,网上借鉴很多(踩了许多坑)最后自己实践出来. <--!将手机屏幕的默认高度和实时高度获取--> data(){ docmHeight: document.documentElement.clientHeight, //默认屏幕高度 showHeight: document.documentElement.clientHeight, //实时屏幕高度 hidshow: true, //显示或者隐藏fo

js监听屏幕的高度变化

之前用VUE写完一个聊天界面,对于ios的效果该优化的地方都已经优化,且已上线.现在因项目需要,在另外一个angularjs+ionic的框架也要写一个聊天页面,目前还在开发中,发现忘记了一些很关键的东西,所以先备个份: 1.当屏幕发生高度变化(其实是当软键盘打开的时候,窗口的高度发生了变化) window.onresize = () =>{ //只要窗口高度发生变化,就会进入这里面,在这里就可以写,回到聊天最底部的逻辑 } 2.vue的写法,把上面的方法写在了mounted里面,然后retur

JS 获取和监听屏幕方向变化（portrait / landscape）

移动设备的屏幕有两个方向: landscape(横屏)和portrait(竖屏),在某些情况下需要获取设备的屏幕方向和监听屏幕方向的变化,因此可以使用Javascript提供的 MediaQueryList 对象接口,使用方法如下: 获取当前屏幕方向(是否是竖屏状态) var mql = window.matchMedia("(orientation: portrait)"); 打印mql,得到MediaQueryList对象如下: 可以通过访问对象的 matches 属性来查看查询结

Android 监听屏幕锁屏,用户解锁

在做一个程序的时候,需要时刻保持某一服务是启动的,因此想到了通过监听屏幕SCREEN_ON和SCREEN_OFF这两个action.奇怪的是,这两个action只能通过代码的形式注册,才能被监听到,使用AndroidManifest.xml 完全监听不到.查了一下,发现这是PowerManager那边在发这个广播的时候,做了限制,限制只能有register到代码中的receiver才能接收. 代码如下: public class ScreenListener { private Context

Android监听屏幕解锁和判断屏幕状态

开发后台服务的时候经常需要对屏幕状态进行判断,如果是想要监听屏幕解锁事件,可以在配置里面注册action为 android.intent.action.USER_PRESENT的广播,则可以监听解锁事件.但有时候,在后台执行某个操作时,需要主动判断屏幕的状态,比如是否是亮着的,可以使用PowerManager的isScreenOn方法进行判断,比如屏幕是否开启了自动旋转等. 注册监听解锁广播: 1 2 3 4 5 <receiver android:name="com.home.tests

Android 监听屏幕锁屏&用户解锁

在做视频播放器的时候,遇到一个问题,在用户播放视频然后锁屏之后,视频播放器仍然在继续播放,遇到类似手机系统状态改变的问题的时候,首先想到了广播,下面做个总结: public class ScreenListener { private Context mContext; private ScreenBroadcastReceiver mScreenReceiver; private ScreenStateListener mScreenStateListener; public ScreenLi

全局监听SCREEN_ON和SCREEN_OFF的替代方法--监听屏幕解锁事件

在做一个程序的时候,需要时刻保持某一服务是启动的,因此想到了通过监听屏幕SCREEN_ON和SCREEN_OFF这两个action.奇怪的是,这两个action只能通过代码的形式注册,才能被监听到,使用AndroidManifest.xml 完全监听不到.查了一下,发现这是PowerManager那边在发这个广播的时候,做了限制,限制只能有register到代码中的receiver才能接收. private void registerScreenActionReceiver(){ final I

pc端监听屏幕实现导航固定定位

要点:占位符 js,监听屏幕滚动事件,当滚动条距离浏览器顶部的距离大于要固定定位开始以下元素的距离,则给要固定元素添加fixed样式. 初始化方法时,要给占位符添加样式 function sortNavInit() { $(".consultBox").find(".sort-clone").css("height", $(".conditionList").outerHeight(false)); // .conditi

[Swift通天遁地]三、手势与图表-(1)监听屏幕上触摸事件的各种状态

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs.com/strengthen/)➤GitHub地址:https://github.com/strengthen/LeetCode➤原文地址:https://www.cnblogs.com/strengthen/p/10207918.html ➤如果链接不是山青咏芝的博客园地址,则可能是爬取作者的文章

js监听某个元素高度变化来改变父级iframe的高度

最近需要做一个iframe调用其他页面内容,这个iframe地址是可变化的,但是里面的内容高度不确定且里面内容高度可调整,所以需要通过监听iframe里面body的高度变化来调整iframe的高度. 后面发现了一个好用的插件detect-element-resize.js,首先看一下这个插件的介绍: 插件简介跨浏览器,基于事件,元素调整大小检测. 简而言之,此实现不使用内部计时器来检测大小更改(就像我发现的大多数实现一样).它使用scroll大多数浏览器上的onresize事件,以及IE10及

IOS监听屏幕状态

一.定义两个宏 //锁屏通知 #define NotificationOff CFSTR("com.apple.springboard.lockcomplete") //解锁通知 #define NotificationOn CFSTR("com.apple.springboard.hasBlankedScreen") 二.注册屏幕监听事件 CFNotificationCenterAddObserver(CFNotificationCente

Android 监听屏幕唤醒和关闭的广播

今天希望应用程序的服务运行时,可以监听到屏幕的唤醒.继续百度学习法,连同监听闭幕关闭也一同学习了. 此种情况需要动态注册系统广播.在AndroidManifest.xml中静态注册的实际运行中无效. private ScreenStatusReceiver mScreenStatusReceiver; 在需要的地方调用如下函数: private void registSreenStatusReceiver() { mScreenStatusReceiver = new ScreenStatusR

监听屏幕旋转事件window. onorientationchange

// 判断屏幕是否旋转 function orientationChange() { switch(window.orientation) { case 0: alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height); break; case -90: alert("左旋 -90,screen-width: " + screen.width

JS -判断、监听屏幕横竖屏切换事件

通过监听window.orientationchange事件,当横竖屏切换事件时触发 <!doctype html> <html> <head> <title>Mobile Cookbook</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale

js监听屏幕方向如何第一次默认不监听

this.supportOrientation = typeof window.orientation === 'number'; // 检查屏幕方向 checkScreenOrientation() { if (this.supportOrientation) { if (window.orientation === 0) { this.screenOrientation = 'portrait'; } if (window.orientation === 90 || window.orien

android监听屏幕打开关闭广播无响应的情况

android在屏幕打开和关闭的时候会发出广播,但是如果receiver配置在AndroidManifest.xml中时,receiver是接受不到任何广播的. <receiver android:name="cn.abcd.listener.ScreenStateReceiver" > <intent-filter> <action android:name="android.intent.action.SCREEN_OFF" /&g

使用UIGestureRecognizer监听屏幕事件

转载自 http://blog.csdn.net/samguoyi/article/details/7911499 如果只是想获取屏幕点击事件有一个最简单的办法,就是写一个透明的uibutton覆盖在需要获取点击事件的view上面. 这里用第二种办法: UIGestureRecognizer有很多继承自它的UIxxxGestureRecognizer: UILongPressGestureRecognizer UIPanGestureRecognizer UIPinchGestureRecog

vue动态监听浏览器窗口高度

HTML: <div ref="page"></div> JS: data(){ return{ clientHeight:'', } } mounted(){ this.clientHeight = `${document.documentElement.clientHeight}`;//获取浏览器可视区域高度 let that = this; window.onresize = function(){ this.clientHeight = `${docum

手机端@media的屏幕适配

@media only screen and (width: 320px) { html { font-size: 16px; }} @media only screen and (width: 360px) { html { font-size: 18px; }} @media only screen and (width: 375px) { html { font-size: 18.75px; }} @media only screen and (width: 400px) { html {

手机端图片预览和缩放js

转至:http://blog.sina.com.cn/s/blog_c342e3090102vcxu.html 1.手机端的图片选择和预览 <input type="file" id="preview"/><img id="theImg"/> var oBtn = document.getElementByIdx_x_x('preview'); var oImg = document.getElementByIdx_

vue 中监听窗口发生变化，触发监听事件， window.onresize && window.addEventListener('resize'，fn) ，window.onresize无效的处理方式

// 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventListener('resize', function() { console.log('窗口发生变化') }) onresize的定义方式一.直接在html中定义如<body onresize="doResize()"/> 二.直接给onresize赋值可以给window

手机端监听屏幕的高度

热门专题