轩枫阁

首页 / Web前端 / 移动前端 / H5 / 移动页面横竖屏切换提示

移动页面横竖屏切换提示

前言

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

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

示例

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

7f58f8079b5943636ebe7a1b17f798801440059523

分析

显示效果非常的不友好,怎么解决呢?

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

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

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

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

1434615908_39_w1053_h553

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

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

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

投入低:只需要使用 landscape.js

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

1434616703_89_w577_h503

lanscape

lanscape.js

简介

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

使用方式

参数说明

Demo

lanscape2

参考自:KM

107/470
109/470

相关阅读

文章评论

  • 经测试发现:如果手机系统中关闭了屏幕旋转,不管是媒体查询还是js的判断旋转都没什么作用。。。

  • 第一个demo刚好反了、

  • 666

    第一个demo有问题

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子