android 横竖切换demo,移动页面横竖屏切换提示

前言

在制作移动页面的时候常会考虑页面在不同手机分辨率下的显示效果，通过一些布局技巧使页面从最小的iphone4 兼容至较大的iphone6 plus及其他android手机。

然而却常常忽略了一个小细节：用户在使用时有时会切换横/竖屏，而制作页面的时候很少考虑用户切换后的效果。

示例

先来看一下如果没有经过考虑横/竖屏切换后的效果(竖版设计为例)。

分析

显示效果非常的不友好，怎么解决呢？

1. 让用户只在横/竖屏查看效果

在原生APP、操作系统里是可以如此设置的，但是前端无法通过 javascript API 进行强制设置。

2. 针对页面响应式调整页面布局及元素

针对横/竖版的设计调整成为竖/横版，显示效果肯定和原设计理念有出入，有些东西肯定拥挤的不行了，工作量也比较大。

3. 针对页面出另一版横/竖版设计和调整页面布局

投入成本过高，用户切换横竖屏的概率小。投入大、效果低。

4. 增加切换后的提示、引导用户合理的方式操作查看

效果好：友好的人性化提示、引导用户、提升用户体验

lanscape.js

简介

使用户在旋转手机屏幕切换为竖屏的时候给一个友好的小提示，移动端手机网页有时无法禁止用户旋转为竖屏，给一个友好的提示更能不必考虑竖屏的布局减少开发维护成本提升用户体验。

使用方式

varlandscape=newlandscape({

mode:'portrait',//portrait,landscape

prefix:'Shine',

});

参数说明

pic:图片地址如'http://ossweb-img.qq.com/images/js/landscape/landscape.png',

picZoom:图片缩放比例如2,

mode:页面模式，如'portrait'或'landscape',

bgcolor:背景色,如'#000',

txt:提示文字,如'为了更好的体验，请将手机/平板竖过来',

txtColor:提示文字颜色如'#ffd40a',

prefix:前缀如'Shine'

Demo

参考自：KM

android 横竖切换demo,移动页面横竖屏切换提示 - 轩枫阁相关推荐

chrome切换前端模式_Chrome调试工具developer tool技巧 - 轩枫阁
Chrome这个浏览器赞的不能再赞了,给前端的开发调试工作带来了极大的效率提升. Chrome的简洁.快速吸引了无数人,它的启动速度.页面解析速度都很快,同时得益于Google V8的快速,Javas ...
Android横竖屏切换的生命周期
关于Android手机横竖屏切换时Activity的生命周期问题,网上有很多相似的文章,大多数都是说明在竖屏切换横屏时Activity会重启一次,而在横屏切换竖屏时Activity会重启两次. 我本身 ...
android横竖屏切换方法,Android横竖屏切换的生命周期
关于Android手机横竖屏切换时Activity的生命周期问题,网上有很多相似的文章,大多数都是说明在竖屏切换横屏时Activity会重启一次,而在横屏切换竖屏时Activity会重启两次. 我本身 ...
uniAPP实现单页面横竖屏切换
uniAPP实现单页面横竖屏切换最近在用uniapp开发,发现官方文档只能全局配置横竖屏切换,找了些文档,最终实现了效果一.官方全局设置 https://uniapp.dcloud.io/coll ...
Android 模拟器横屏竖屏切换设置
Android 模拟器横屏竖屏切换设置时间:2012-07-04 来源:设计与开发作者:Daniel 点击:5571 摘要: Android 模拟器旋转,横屏.竖屏切换设置,andr ...
dplayer js控制自动全屏_vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】...
最近公司的产品上线,一些高级功能在基础版本中不对用户开发,通过视频的形式展示. 产品开发用的是 vue, 经同事介绍使用了vue-video-player视频播放插件,通过 demo案例很快实现了视频 ...
【蓝桥杯嵌入式】应赛技巧①多屏切换
摘要本文章基于国信长天CT1117E-M4开发板,讲述了在蓝桥杯嵌入式比赛过程中双屏切换的实现技巧,帮助同学们在比赛中快速实现该功能. 命题趋势分析统计分析近5年的省赛真题,都出现了通过按键切换屏 ...
android activity横竖屏切换，Activity重新创建问题解决！
activityA和B A跳转到B 1:在主配置文件中添加Bactivity,如果不想B在横竖屏切换的时候导致activity的销毁和重新创建;可在声明activity中添加 android:conf ...
Android开发中横竖屏切换的问题以及系统提供的常用Activity
Android开发中横竖屏切换的问题以及系统提供的常用Activity(总结) 2018年06月28日 16:18:45 北极熊的微笑阅读数:72 横竖屏切换与状态保存的问题前面也也说到了App横 ...

android 横竖切换demo,移动页面横竖屏切换提示 - 轩枫阁

android 横竖切换demo,移动页面横竖屏切换提示 - 轩枫阁相关推荐

最新文章

热门文章