展开

关键词

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

在移动端中我们经常碰到的问题,那么我们应该如何去判断或者针对、竖来写不同的代码呢。 不一定,有些浏览器会将user-scalable理解为用户手动缩放,如果user-scalable=no,initial-scale将无法生效。 :landscape)" href="landscape.css" rel="external nofollow" 二、JS判断 //判断手机横竖状态: window.addEventListener ; } }, false); //移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在还是竖状态。 --css媒介查询判断-- @media (orientation: portrait) { } @media (orientation: landscape) { }竖 进入网页检测是否状态

1.3K10

HTML5中判断

在移动端中我们经常碰到的问题,那么我们应该如何去判断或者针对、竖来写不同的代码呢。 一:CSS判断 写在同一个CSS中 @media screen and (orientation: portrait) { /*竖 css*/ } @media screen ) { /*竖 css*/ } @media screen and (orientation: landscape) { /* css*/ } <link rel="stylesheet " media="all and (orientation:landscape)" href="landscape.css"> JS判断 //判断手机横竖状态: window.addEventListener ; } }, false); //移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在还是竖状态

1.8K40
  • 广告
    关闭

    腾讯云+社区系列公开课上线啦!

    Vite学习指南,基于腾讯云Webify部署项目。

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

    H5直播避坑指南

    视频的高度问题 在安卓下,一些浏览器如QQ浏览器和UC浏览器,系统会把视频的层级调到最高,所以如果想在页面上显示dom元素,都会被视频盖住,单纯的设置该dom的z-index是无效的,如图所示 ? 而一般用户进入页面基本都是竖,所以我们就要考虑怎么让用户在竖点击全屏按钮时,能体验到像终端app一样自动进入全屏的体验,下面有两种方案 1.在用户点击全屏时候,通过css3属性旋转屏幕 通过css 在拉起键盘输入弹幕的时候,键盘不受控制还是竖显示了 如果页面不涉及与原生组件的交互,那么这种方案是一种很可行且兼容性比较好的方案 2.用户在点击全屏时,通过js api来控制webview旋转 在手Q里,我们和终端的同学合作添加了控制webview横竖的接口 在用户点击全屏的时候,先判断当前是否 /** * 是否 */ function isHorizontal mqq.ui.setWebViewBehavior({ orientation: 0 //0是竖,1是 }); 如果是竖则强制webview旋转进入,同时监听页面的

    1.7K151

    H5 直播避坑指南

    视频的高度问题 在安卓下,一些浏览器如QQ浏览器和UC浏览器,系统会把视频的层级调到最高,所以如果想在页面上显示dom元素,都会被视频盖住,单纯的设置该dom的z-index是无效的,如图所示 ? 而一般用户进入页面基本都是竖,所以我们就要考虑怎么让用户在竖点击全屏按钮时,能体验到像终端app一样自动进入全屏的体验,下面有两种方案 1.在用户点击全屏时候,通过css3属性旋转屏幕 通过css 在拉起键盘输入弹幕的时候,键盘不受控制还是竖显示了 如果页面不涉及与原生组件的交互,那么这种方案是一种很可行且兼容性比较好的方案 2.用户在点击全屏时,通过js api来控制webview旋转 在手Q里,我们和终端的同学合作添加了控制webview横竖的接口 在用户点击全屏的时候,先判断当前是否 /** * 是否 */ function isHorizontal mqq.ui.setWebViewBehavior({ orientation: 0 //0是竖,1是 }); 如果是竖则强制webview旋转进入,同时监听页面的

    1.1K90

    H5直播避坑指南

    视频的高度问题 在安卓下,一些浏览器如QQ浏览器和UC浏览器,系统会把视频的层级调到最高,所以如果想在页面上显示dom元素,都会被视频盖住,单纯的设置该dom的z-index是无效的,如图所示 [1498530055801 [1498530690853_9107_1498530690371.jpg] 而一般用户进入页面基本都是竖,所以我们就要考虑怎么让用户在竖点击全屏按钮时,能体验到像终端app一样自动进入全屏的体验 如果页面不涉及与原生组件的交互,那么这种方案是一种很可行且兼容性比较好的方案 2.用户在点击全屏时,通过js api来控制webview旋转 在手Q里,我们和终端的同学合作添加了控制webview 横竖的接口 在用户点击全屏的时候,先判断当前是否 /** * 是否 */ function isHorizontal() { if (window.orientation mqq.ui.setWebViewBehavior({ orientation: 0 //0是竖,1是 }); 如果是竖则强制webview旋转进入

    1.8K130

    metahandler.js——移动端适配各种屏幕无痛工具脚本

    使用的基本框架 主要使用的基本框架是:MetaHandler.js。大家可以点击此处下载——“下载MetaHandler.js”,提取密码为:9074,也可以直接复制下面的代码。 ! 可能的问题 在使用谷歌浏览器进行浏览时,如果后点击刷新,则页面会再缩小,成为居中显示状态,此时再竖之后,左右也会留白(此时再刷新是能重新恢复正常)。具体效果如下。 后再刷新的效果: ? 从恢复到纵的状态: ? 我们的看法:很少有人在旋转到之后再刷新页面。而且目前移动端使用谷歌浏览器的人也很少,所以个人感觉这个bug是可以忽略的。 另外,对于转回到纵的时候,实际上我们是可以进行设备方向检测,然后再触发一次页面刷新,就不会出现纵上的问题了~ 最后的话:我们使用了这个框架进行页面的开发,但是最近在使用时,感觉到在一些浏览器当中有些卡顿 ,用同样的设备和浏览器去测试了网易的手机页面,倒是没有什么卡顿现象,关于卡顿的问题,目前还在思考当中~~~ 欢迎沟通交流~HTML5学堂

    835110

    移动端H5知识 - 固定像素的实现方法

    使用的基本框架 主要使用的基本框架是:MetaHandler.js。 ! 可能的问题 在使用谷歌浏览器进行浏览时,如果后点击刷新,则页面会再缩小,成为居中显示状态,此时再竖之后,左右也会留白(此时再刷新是能重新恢复正常)。具体效果如下。 后再刷新的效果: ? 从恢复到纵的状态: ? 我们的看法:很少有人在旋转到之后再刷新页面。而且目前移动端使用谷歌浏览器的人也很少,所以个人感觉这个bug是可以忽略的。 另外,对于转回到纵的时候,实际上我们是可以进行设备方向检测,然后再触发一次页面刷新,就不会出现纵上的问题了~ 最后的话:我们使用了这个框架进行页面的开发,但是最近在使用时,感觉到在一些浏览器当中有些卡顿 ,用同样的设备和浏览器去测试了网易的手机页面,倒是没有什么卡顿现象,关于卡顿的问题,目前还在思考当中~~~

    78040

    移动端适配解决方案

    ,动态判断当前设备的dpr,从而改变根元素的font-size,也是一种很好的方案,例如 著名的flexible.js,非常好用,唯一不足时多引入了一个js文件,而且对安卓的适配性不是很好。 用视口单位度量,视口宽度为100vw,高度为100vh(左侧为竖情况,右侧为情况) 例如,在桌面端浏览器视口尺寸为650px,那么 1vw = 650 * 1% = 6.5px(这是理论推算的出, 如果浏览器不支持0.5px,那么实际渲染结果可能是7px)。 截图来自X5内核-Can I Use 视口单位特点是宽度或者高度不同,对应的尺寸也会发生变化,从而达到适配即自适应,然而也有缺点,不能设置最大最小宽度限制,当比如展示的时候,宽度很宽的情况下,必须设置最大 此方法实现的适配,可以很好的做平板的适配,只需要限制最大font-size就可以,对于下显示的字体大小设置,个人感觉一个很方便的方法,直接在下所有的vw改为vh即可,唯独在页面是但宽高差别不大的时候

    41730

    11 个 CSS 知识搭配 11 个 JS 特性 (实用合集)

    我觉得优秀的代码其中有一条肯定是代码的复用性。 11 个有趣实用的 JS 特性 在日常开发中总是和各种 API 打交道,我们名为前端工程师实为 API 调用工程师。这里分享 11 个实用又有趣的 JS 特性,使用得当可以提高你应用的友好性。 1. 监听屏幕旋转变化接口: orientationchange 定义: 这个 API 可以将你手机是否的情况暴露给需要知道的人知道。 90 向左 -90/270 向右 180 倒 通过这个 API 我们在和竖的时候可以添加一些动作或者是样式的改变。 如果只是样式的改变也可以通过媒体查询来监听: /* 竖 */@media screen and (orientation: portrait) { // some css code}/*

    50230

    关于iPad的100个问题

    iPad有什么秒用? 大iPad可以作为MacBook的扩展屏幕,打开MacOS随航,连接iPad,MacBook就有了两个屏幕~ 2. iPad应对锁区App(比如TikTok)有什么良策? iPad Pro 外放音质比iPhone好得多,安装iPad版网易云音乐,然后将iPad放,左侧是细腻的唱片动画,右侧是歌词,看起来极其舒服,仿佛一个唱片机在运作。 iPad可以剪视频,但iPad的性能并不算,存储空间非常有限,导入导出4K视频会很麻烦,专业的视频剪辑,建议使用MacOS或Windows。 7. iPad 可以自由安装App么? 首先你要有一颗强大的想要学习的心, 然后是安装一些软件,比如notability(听课笔记),MarginNote Pro(看书总结),Procreate(绘图); 尽量不安装游戏App,不安装剧App iPad相对Mac有几个硬伤,外部接口稀缺,性能不够,配套的专业软件生态不够好。 13. iPad 可以作为Windows 扩展么? 可以! Duet Display 了解下?

    24420

    js和css实现手机横竖预览思路整理

    算好大概内间距,用来放预览的页面,我这里是给手机预览页面的尺寸按iphone5的尺寸来的; 一个手机页面在这里预览,要通过<iframe>标签,左边选择不同的select选项,通过监听select选项的值,在js 中动态改变iframe的src来实现; 因为要实现和竖的预览,切记,千万不能在点击的时候,把竖的页面旋转90度,这样是没有效果的,因为预览页面的本身还是竖的,只是页面跟着一起旋转了90度, 要单独另外写一个的box,宽度大于高度的,这样当预览页面识别到宽度大于高度,即按的效果展示; 我这里实现思路是把的div默认display:none;默认选择竖的时候,就直接把竖的box 下的iframe的url和模式下的iframe的url一起改变了,当选择的时候,展示的box,隐藏竖的box,但是事实是的此时不会展示页面,而是空白,而在默认选择了的情况下,去切换其他页面的时候 与竖通过定位放在同一个位置即可。

    80150

    移动web端常见bug汇总001

    important; margin: 0; } 实现的方案 css 用 css3媒体查询,缺点是宽度和高度不好控制 @media screen and (orientation transform: rotate(-90deg); width: 100vh; height: 100vh; /*去掉overflow 微信显示正常,但是浏览器有问题 ,竖时强制缩小*/ overflow: hidden; } } @media screen and (orientation: landscape) { .main moz-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0) } } js 实现的方案 参考资料 移动端采坑指南-知乎(熊汉彪)

    52940

    使用JavaScript判断手机是处于还是竖(转)

    移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在还是竖状态。 从而根据实际需求而执行相应的程序。 } if(window.orientation==90||window.orientation==-90){ alert("状态!") "orientationchange" : "resize", hengshuping, false); 在ipad、iphone网页开发中,我们很可能需要判断是或者竖。 · 下面介绍如何用 jQuery 判断iPad、iPhone、Android是还是竖的方法 function orient() { if (window.orientation == 90 || window.orientation == -90) { //ipad、iphone竖;Andriod $("body").attr("class", "landscape"); orientation

    1.8K20

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

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

    6020

    移动端H5之动态设置html的font-size的BUG修复以及提示 by FungLeo

    移动端H5之动态设置html的font-size的BUG修复以及提示 by FungLeo 前言 在上一篇 移动端之在不同尺寸大小的手机上展示同一效果解决方案 中,我们考虑的只是默认竖的情况. 很显然,如果用户手机允许屏幕旋转,那么在的情况下,页面就变得很恶心了. 因此我们需要进行一个处理,来判断浏览器是否是,在的情况下,要使用高度值来计算html的font-size. .但是,的情况下,页面会变得比较怪异,应该给用户一个提示. ==-90){ alert("下不能获得最佳体验,建议竖浏览网页!")

    11320

    常用开发技巧系列(五)

    前面说了,这个解决起来很简单,但是我们不明不白的设置这东西就是属于稀里糊涂了: 二: 切换竖 ---- 我们一般的游戏都是的,当然也有竖的,在日常的需求中很有可能就涉及到游戏和原生界面的交互 ,就有了游戏切换竖原生界面出来,其实最让人头疼的,是你切换界面之后还有键盘的问题! 在自己的游戏中就有这样一个切换是在客服系统当中,的游戏需要你切换到竖的一个客服聊天界面!其中就涉及到这个键盘的问题! didReceive message: WKScriptMessage) { let Url = message.body //MARK: 唤起浏览器 当然也可以是JSON字符串,JSON就能满足一般的需求了,要是JS返回的是一个Objcet,对不起你没办法处理!你可以叫JS把对象处理成JSON字符串给你。

    44741

    移动端web开发笔记

    orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> (landscape: case -90: case 90: alert(":" + window.orientation); break; } } 样式 //竖时使用的样式 @media all and (orientation:portrait) { .css{} } //时使用的样式 语法与jquery几乎一样,会jquery基本会zepto~ iscroll.js解决页面不支持弹性滚动,不支持fixed引起的问题~ 实现下拉刷新,滑,缩放等功能~ underscore.js 该库提供了一整套函数式编程的实用功能 适合上下滑、左右滑等滑切换页面的效果 slip.js iSlider.js fullpage.js swiper 3.瀑布流框架 masonry 工具推荐 caniuse各浏览器支持html5属性查询

    17620

    相关产品

    • 前端性能监控

      前端性能监控

      腾讯云前端性能监控(RUM)是一站式前端监控解决方案,用户只需要安装 sdk 到自己的项目中,通过简单配置化,即可实现对用户页面质量的全方位守护,真正做到了低成本使用和无侵入监控。

    相关资讯

    热门标签

    扫码关注腾讯云开发者

    领取腾讯云代金券