移动端竖屏解决方案

为大家提供一个H5页面手机横屏解决方案，这个是我朋友给我的，特别好用：https://pan.baidu.com/s/1eVZf6frKNnZylkft-OaFPA

当手机横屏的时候会出现：

因为不管使用监听旋转角度还是监听长宽比进行页面旋转，都会受到兼容性和可操作性的一些限制。这个方案也是用页面的宽高比来确定是否横屏，如有BUG，请自行修复...

哈哈哈，不要方，暂时还没发现无法兼容的机型，如果觉得样式不友好，可以写css改样式。

原文地址：https://www.cnblogs.com/ovocake/p/9010963.html

时间： 2024-11-09 09:21:09

移动端竖屏解决方案的相关文章

Android开发：ZXing条码扫描-竖屏解决方案

写在前面的话感谢ZXing团队,项目下载地址:https://github.com/zxing/zxing,项目下载后,Android条码扫描主要用到三个模块:android,android-core,core.zxing项目解压后目录结构如图所示: android是ZXing提供的条码扫描器apk客户端源码,android-core和core是需要的类库.本文提供的zxing竖屏扫描解决方案采用的android版本号versionName为4.7.4,versionCode为104,zxin

移动端竖屏切换横屏时候字体变大

最近遇到ios设备竖屏切换到横屏时候,字体会发生变化的情况.用以下方法可以解决此类问题 -webkit-text-size-adjust : none ; -moz-text-size-adjust : none ; -ms-text-size-adjust : none ; text-size-adjust : none 这样就能禁止当手机由竖屏转向横屏的时内容中的文字自动调整大小,各浏览器下的私有属性为-webkit-text-size-adjust,-moz-text-size-adjus

js判断用户使用设备及移动端竖屏代码实现

var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return { trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1, //opera内核 webKit: u.indexOf('AppleWebKit') > -1, //苹果.谷歌内核 gecko: u.

移动端页面自适应横屏竖屏解决方法思考

之前对于横屏的webapp做过一些尝试,但是始终不是很好的解决方案,前段时间又接触了类似的需求,尝试了感觉更好的解决方案. 之前的方法写的博客:移动网页横竖屏兼容适应的一些体会这里举的例子还是平时常见的移动端的滑动页面,也就是上下切换页面的"H5". 首先要做的准备: 1.html布局 <div id="wrap"> <div class="pageWrap"> <div class="img11&quo

移动端触屏click点击事件延迟问题，以及tap的解决方案

在移动端触屏click事件虽然也会响应,但是总感觉是有延迟,一直听说click事件在手机上有200~300毫秒的延迟问题,亲自测了一下,在pc端模拟手机的话是测不出来的,但是用手机测试时发现延迟非常明显,用我的iphone5执行下段测试代码,平均延迟在370毫秒!结果非常惊人,所以在移动端必须得用tap事件了,click不仅仅是慢的问题,而且会严重影响css3动画!没错,这绝对是真的,我做的单页应用,用click事件执行的,点击后css3切换动画,经常会出现动画被省略掉直接到最后一个keyfr

移动端判断横屏竖屏

1. CSS判断横屏竖屏写在同一个CSS中 @media screen and (orientation: portrait) { /*竖屏 css*/} @media screen and (orientation: landscape) { /*横屏 css*/}分开写在2个CSS 竖屏<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css

移动端position:fixed 解决方案

相信不少人做移动端项目的时候都会遇到position:fixed 的坑. 下面提供一个解决方法,不用引入任何其他的js库,纯css解决. 解决问题的关键就是:fixed元素内部必须嵌套一个position:absolute元素,用来装载内容,目的就是为了让内容脱离fixed文档流,屏蔽一些fixed的坑 html部分 <!DOCTYPE html> <html lang="zh_cmn"> <head> <meta name="des

HTML5中判断横屏竖屏

HTML5中判断横屏竖屏在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏.竖屏来写不同的代码呢. 这里有两种方法: 一:CSS判断横屏竖屏写在同一个CSS中 1 2 3 4 5 6 @media screen and (orientation: portrait) { /*竖屏 css*/ } @media screen and (orientation: landscape) { /*横屏 css*/ } 分开写在2个CSS中竖屏 1 <link rel=

JS检测移动端横竖屏的代码

这篇文章主要介绍了JS检测移动端横竖屏的代码,需要的朋友可以参考一下使用media来判断屏幕宽度遇到的问题: ios上当我旋转屏幕的时候可行,但是安卓机上没反应,横屏显示的还是我竖屏的样式. 查了一下资料,css3的media如果要在移动端有较好的显示效果,需要在页头加上这段代码 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-s