移动端的横屏和竖屏

2,204 阅读1分钟
  1. 使用的react-native等框架 可以操作手机的横屏和竖屏

正常开发适配横屏和竖屏,在需要切换的时候,调用api横屏或竖屏,一般这些框架一般做成熟一点的app,不会拿来写web网页

  1. 用的框架不能操作手机的横屏和竖屏,或h5直接写的web页面

出两套设计图或者一套设计图同时适配横屏和竖屏, 在用户横屏或竖屏的时候,使用媒体查询 缺点:需要用户自己去设置打开手机旋转,用户体验可能不太好

//横屏
@media (orientation: landscape){
    
}
// 竖屏
//@media screen and (orientation: portrait) {
    
}
  1. js旋转强制横屏

使用css3的tranform的旋转属性,让用户手机不管横屏和竖屏看到的一直是横屏的状态,这个当用户手机调成屏幕旋转的时候,适配不是很好做,并且当界面内有echart图表的时候,echart图表上的交互都会挂掉