移动Web开发—处理设备的横竖屏

  为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的问题就会凸显——我们至少需要处理一下当前显示元素的宽度的适配(当然,要做的可能不仅仅是这个)。很多时候,我们需要为不同的屏幕方向来设计对应的应用显示模式,这个时候,实时地获知设备的模竖屏状态就显得极为重要。

  http://dict.baidu.com/s?wd=%E6%B4%9B%E4%B8%BD%E8%AF%97%E4%B8%B0%E8%83%B8+++100%25%E4%B8%B0%E8%83%B8%E6%88%90%E5%8A%9F++%E6%B3%95%E5%9B%BD%E7%94%9F%E7%89%A9%E7%A7%91%E6%8A%80%E5%AE%8C%E7%BE%8E%E7%BB%93%E5%90%88

  window.orientation属性与onorientationchange事件

  window.orientation:这个属性给出了当前设备的屏幕方向,0表示竖屏,正负90表示横屏(向左与向右)模式

  onorientationchange:在每次屏幕方向在横竖屏间切换后,就会触发这个window事件,用法与传统的事件类似

  //屏幕方向

  window.onorientationchange=function(){

  if(window.orientation==0){

  alert("竖屏")

  }else{

  alert("横屏")

  }

  };

时间: 2024-11-04 10:54:31

移动Web开发—处理设备的横竖屏的相关文章

android开发如何切换横竖屏

横竖屏设置 横竖屏的设置在AndroidManifest.xml文件中: screenOrientation="landscape"为横屏: screenOrientation="portrait"为竖屏:

iOS开发之判断横竖屏切换

/** *  当屏幕即将旋转的时候调用 * *  @param toInterfaceOrientation 旋转完毕后的最终方向 *  @param duration  旋转动画所花费的时间 */ - (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration { if (UIInterfaceOrientation

H5跨平台开发app之横竖屏导致的图表混乱问题

在跨平台开发中,犹豫使用的是非原生开发语言,会导致很多不方便的地方,最近公司做一个统计图表的东西,如果用原生开发的话比较容易控制图表显示时手机屏幕的方向,在跨平台开发中比较麻烦, 如果用户打开了手机屏幕自动旋转,有可能导致图表显示的错误. 解决方案: <!DOCTYPE html> <html lang='en'>     <head>         <meta charset='UTF-8'>         <title>ichartjs 

(一〇八)iPad开发之横竖屏适配

在iPad开发中,横竖屏的视图常常是不同的,例如侧边栏Dock,在横屏时用于屏幕较宽,可以展示足够多的内容,每个按钮都可以展示出标题:而竖屏时Dock应该比较窄,只显示图标不现实按钮标题. iPad比较重要的知识是不同类型设备的宽高在以点为单位的图形坐标系下固定为768x1024,因此常常利用此值来判断横竖屏. 768.1024.横竖屏判断很常用,可以定义一个公共的常量文件来放这些内容. [常量和宏的定义] ①在.m文件中,定义变量,加上const,注意指针(例如NSString*)使用的是常量

Android横竖屏切换的生命周期

现在的手机默认情况下可以横竖屏切换,但是横竖屏切换的生命周期是怎么样的,今天就来说明一下,以防你开发的app横竖屏时game over 1.在不做任何配置的情况下,加载一个activity的打印日志: 切换屏幕时方向的打印日志: ps:我这里没出现什么横屏切换竖屏时执行两次oncreate,个人觉得不对 2.配置android:configChanges="keyboardHidden|orientation|screenSize"时,屏幕切换时,不会出现重启activity 3.配置

移动视频开发中横竖屏转换遇到的BUG(Android)

剧情铺垫:首先申明,我是一个Android初学者.最开始我们想做一个视频通话软件,很快就找到了AnyChat.但当时用的是官网的demo,只支持横屏.我们想做成横竖屏都支持的效果. 遇到的问题 1.自己的视频会被对方的视频挡住 2.自己的视频横竖比例不对 3.自己的视频将音量条挡住 4.自己的视频不能居中 问题1的处理 尝试1:由于较熟悉web方面的知识,最先想到用z-index控制View的叠放,结果悲剧的没找到z-index类似物 尝试2:Android中,xml排在后的会覆盖排在前的,但这

cocos2d-x游戏开发屏幕横竖屏切换

android解决方案: 1.在游戏的主activity中编写一个静态方法(继承Cocos2dxActivity) public static void changedActivityOrientation(int orientation){ switch(orientation) { case 1://横屏 instance.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE); break; case 2://竖

iOS iPad开发之横竖屏适配

1. 做横竖屏适配的时,需要判断当前状态是横屏还是竖屏,有两种方法: 第1种:[UIScreen mainScreen].bounds.size.width == 768 优点:把这个抽成宏之后,随时可以判断横竖屏, #define Lanscape ([UIScreen mainScreen].bounds.size.width == 768) 缺点:只在iOS8可行,也就是说在iOS8中横屏的width=1024,竖屏的width=768; 而在iOS7上,横竖屏的width=768 第2种

相机开发(聚焦、横竖屏拍照、照片存储、连续拍照等)

近期项目用到了相机拍照的功能,于是想着封装好一些通用性较好的相机调用,从百度和谷歌上查找出来的资料真的印证了"天下文章一大抄"的道理,并且它们实现的拍照功能大都存在缺陷,如聚焦问题.反复拍照问题.照片存储问题.横竖屏转换问题.一大堆的问题,并且程序的扩展性和可重用性实在不敢恭维,排版级其混乱. 最后无奈,打开API文档camera相机类,从最基础的学起,然后自己进行改进,从这里也告诉我们一个道理,API文档才是学习起点,由于它会告诉你整个实现的原理和原因,可以对整个框架有一个总体的了解