`
cxy020
  • 浏览: 63522 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

屏幕旋转的事件和样式

 
阅读更多

事件

window.orientation,取值:正负90表示横屏模式、0和180表现为屏模式;

复制代码
window.onorientationchange = function(){
    switch(window.orientation){
        case -90:
        case 90:
        alert("横屏:" + window.orientation);
        case 0:
        case 180:
        alert("竖屏:" + window.orientation);
        break;
    }
}  
复制代码

样式

复制代码
//竖屏时使用的样式
@media all and (orientation:portrait) {
.css{}
}

//横屏时使用的样式
@media all and (orientation:landscape) {
.css{}
}
复制代码
分享到:
评论

相关推荐

    Swift多种屏幕旋转方式

    在iOS应用开发中,Swift语言提供了多种方法来处理屏幕旋转,以适应用户的不同设备和使用习惯。屏幕旋转是用户体验中的重要一环,合理的旋转管理能让应用程序更具灵活性和易用性。本文将深入探讨Swift中实现屏幕旋转...

    ios屏幕旋转ios屏幕旋转

    本篇文章将深入探讨iOS系统中的屏幕旋转机制,包括如何处理屏幕旋转事件、实现自动旋转以及手动控制旋转,同时也会涉及到相关的API和技术。 首先,iOS设备具有内置的传感器,如加速度计和陀螺仪,用于检测设备的...

    swift-默认样式系统样式的ActionSheet可以自定义;支持屏幕旋转

    在Swift编程中,UI设计是应用开发不可或缺的一部分。ActionSheet是一种常见的用户界面元素,用于向用户提供一...通过创建自定义视图控制器、处理布局、添加交互和处理屏幕旋转,可以打造出满足各种需求的ActionSheet。

    日期选择控件(可防止屏幕旋转抛出的异常)

    屏幕旋转时,Android系统会销毁当前的Activity并重新创建,这是一个常见的生命周期事件。为了防止数据丢失,我们需要在Activity中实现数据持久化。有两种主要方法可以处理这个问题: 1. **使用onSaveInstanceState...

    使用DialogFragment替代AlertDialog

    首先,DialogFragment是Android支持库中的一个组件,它是Fragment的子类,这意味着它可以像Fragment一样管理生命周期,而Fragment的设计理念就是为了更好地处理屏幕旋转和其他配置更改。当我们使用AlertDialog时,...

    swift-DZMPhotoBrowser图片展示器:支持横竖屏屏幕旋转

    这款库不仅支持横竖屏切换,还能适应屏幕旋转,使得用户在不同设备和使用环境下都能获得良好的图片浏览体验。其简单易用的接口和丰富的注释,让开发者可以轻松集成到自己的项目中,并根据需求进行二次开发。 首先,...

    自由旋转的控件

    在开发过程中,我们还需要考虑屏幕旋转时数据的保存和恢复。在Android的`onSaveInstanceState()`和`onRestoreInstanceState()`,或者iOS的`viewWillDisappear:`和`viewWillAppear:`中处理状态保存和恢复,以防止旋转...

    3D旋转图片的html样式

    "3D旋转图片的html样式"就是一个利用HTML和JavaScript技术来实现动态3D效果的实例。这个项目提供了一个美观的旋转图片展示页面,允许用户直接进行修改以适应自己的需求。 首先,我们来探讨HTML在3D效果中的作用。...

    S60_Platform_Custom_UI_and_Screen_Rotation_Example

    本文将深入探讨如何在S60平台上进行用户界面(UI)的定制以及实现屏幕旋转功能,以此为例,帮助开发者更好地理解和实践Symbian C++编程。 S60平台是Symbian操作系统的一个重要分支,主要应用于诺基亚等品牌的智能...

    旋转木马banner和圆形旋转特效菜单

    通过监听用户的交互事件,比如鼠标滚轮、触摸滑动,动态更新CSS样式,控制元素的旋转和移动。 3. **响应式设计**:考虑到不同设备的屏幕尺寸,旋转木马应具备响应式设计,确保在手机、平板和桌面电脑上都能正常显示...

    Android屏幕旋转之横屏竖屏切换的实现

    开门见山的说,实现屏幕自动/手动旋转的方式有两种: 一种是在工程的代码中定义,这种方式在横竖屏切换时执行的操作是:销毁当前Activity–根据新的屏幕尺寸重建Activity。如果不进行数据存储的操作,在切换的过程中...

    Silverlight旋转门效果

    变换主要包括ScaleTransform(缩放变换)、RotateTransform(旋转变换)和TranslateTransform(平移变换)等,通过这些变换,我们可以让元素在屏幕上动态地改变位置、大小和方向。 2. **Storyboard**:Storyboard是...

    文字在图片上显示并旋转

    `Font`用于定义文字的样式,包括字体、大小和粗细;`SolidBrush`用作填充工具,可以用来填充文字的颜色;`StringFormat`则用来设置文字的对齐方式、换行模式等格式属性。 1. 文字在图片上显示: 要在图片上显示...

    图片旋转支持所有浏览器

    例如,使用`touchstart`, `touchmove`, 和 `touchend`事件处理移动设备上的旋转,以及`mousedown`, `mousemove`, 和 `mouseup`事件处理桌面设备上的旋转。 总结,图片旋转在网页开发中是一项常见且实用的功能。通过...

    旋转木马3D环形特效

    3. **响应式布局**:为了适应不同设备和屏幕尺寸,我们需要采用响应式设计。可以使用媒体查询(`media queries`)来针对不同分辨率和设备方向调整布局和样式,确保在任何设备上都能呈现出良好的视觉效果。 4. **事件...

    jQuery旋转木马特效

    jQuery旋转木马特效是一种在网页上展示图像的动态...在提供的压缩包文件中,可能包含了实现这些功能的JavaScript脚本、CSS样式文件和示例HTML结构,通过分析和学习这些文件,可以更好地理解和复用这个旋转木马特效。

    旋转木马完整资源打包

    5. **触摸事件支持**:考虑到移动设备的广泛使用,旋转木马可能还需要支持触摸滑动操作,这就需要处理触摸开始(`touchstart`)、移动(`touchmove`)和结束(`touchend`)事件。 6. **性能优化**:为了提供流畅的...

    Android 焦点事件

    2. 触摸与焦点的关系:尽管触摸事件和焦点事件看似独立,但它们在某些情况下相互影响。例如,当用户点击一个不可见的可聚焦视图时,该视图可能会获取焦点。 五、自定义焦点行为 1. 自定义焦点样式:开发者可以通过...

    jQuery和CSS3炫酷图片3D旋转幻灯片特效

    9. **响应式设计**:考虑到现代网页需要适应不同的设备和屏幕尺寸,iPresenter可能采用了响应式设计,通过媒体查询(Media Queries)调整布局和样式,确保在手机、平板电脑和桌面设备上都能良好显示。 10. **性能...

    安卓旋转按钮eclipse

    而滑动事件则需要`OnTouchListener`,通过重写`onTouch()`方法来检测用户的滑动动作,比如ACTION_DOWN(手指接触屏幕)、ACTION_MOVE(手指在屏幕上移动)和ACTION_UP(手指离开屏幕)。这些事件可以用来改变按钮的...

Global site tag (gtag.js) - Google Analytics