`
endual
  • 浏览: 3544381 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

JS 判断手机横屏还是直屏

    博客分类:
  • JS
 
阅读更多
查了不少资料,最后结论如下: 
复制代码 代码如下: 
function orientationChange(){ 
switch(window.orientation) { 
case 0: // Portrait 
case 180: // Upside-down Portrait 
// Javascript to setup Portrait view 
break; 
case -90: // Landscape: turned 90 degrees counter-clockwise 
case 90: // Landscape: turned 90 degrees clockwise 
// Javascript to steup Landscape view 
break; 
} 
} 
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", orientationChange, false); 

 

分享到:
评论

相关推荐

    手机页面强制竖屏显示 强制竖屏 js css 手机屏幕竖屏

    在这个事件处理器中,我们可以判断`window.orientation`值,它在横屏时会返回90或-90(取决于设备的前部是向左还是向右)。若用户尝试横屏,你可以添加一个遮罩层,阻止用户看到横屏内容。遮罩层可以通过CSS实现,...

    让移动端网页强制横竖屏

    在移动端网页开发中,有时我们需要根据应用场景来控制用户设备的屏幕方向,比如游戏或阅读类应用通常适合横屏,而一些简单的表单填写或者垂直滚动的内容可能更适合竖屏。本教程将详细介绍如何使用JavaScript实现...

    JS判断页面是否出现滚动条的方法

    总结来说,本文介绍了一个利用JavaScript判断页面是否有滚动条的函数实现,它通过读取和判断页面元素的滚动位置属性来完成判断。这不仅对于理解页面布局特性有所帮助,也对于提高用户界面的友好性和交互性具有重要...

    菜单切换js效果(滑动与点击)

    综上所述,"菜单切换js效果(滑动与点击)"涉及到JavaScript事件处理、CSS3动画、响应式设计、性能优化以及无障碍性等多个方面。掌握这些技术,可以创建出既美观又实用的网页菜单,提升用户的交互体验。在实际开发中,...

    程序天下:JavaScript实例自学手册

    1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入...

    jQuery横向和纵向手风琴切换.zip

    接着,根据用户的需求,判断是横向还是纵向切换,并调整相应的CSS属性,如宽度、高度以及过渡效果的方向。最后,确保每次切换时,只有一个项处于展开状态,避免内容重叠。 在实际应用中,我们还需要考虑响应式设计...

    《程序天下:JavaScript实例自学手册》光盘源码

    1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入...

    横向排序的瀑布流jquery实现,完整项目

    5. **响应式设计**:为了适应不同设备和屏幕尺寸,项目可能还包含了响应式设计,使瀑布流布局能够在手机、平板电脑和桌面电脑上都有良好的显示效果。 6. **优化性能**:考虑到用户体验,开发者可能会使用一些技巧来...

    javascript实现根据iphone屏幕方向调用不同样式表的方法

    根据window.orientation返回的值,我们可以判断当前屏幕是横向还是纵向,并相应地更改"orient_css"元素的href属性。例如,当屏幕处于纵向时(window.orientation为0),将样式表链接到css/iphone_portrait.css,而当...

    Html5+JS实现手机摇一摇功能

    此事件可以获取手机在静止状态下的方向数据,例如手机的倾斜角度、方位、朝向等信息。 除了deviceOrientation事件之外,DeviceOrientation还包括deviceMotion事件,它允许开发者监听并获取手机在运动状态下的加速度...

    fullscreen:网页全屏滑动

    虽然可以从零开始编写全屏滑动功能,但许多现成的库和框架如Fullpage.js、swiper.js等已经提供了成熟的解决方案。这些工具简化了开发流程,同时包含了许多预设的动画效果和选项,便于定制和维护。 总结,实现网页...

    手机端卡片效果轮播

    实现这种效果,开发者通常会使用到JavaScript库或者框架,如React Native、Vue.js或Swiper.js等。这些工具提供了丰富的API和配置选项,帮助开发者构建出平滑、响应式的轮播组件。 在开发上下轮播卡片时,以下是一些...

    DetailAdmin响应式后台管理html静态模板.zip

    这款模板以其响应式布局为核心特点,能够自适应不同屏幕尺寸,从桌面电脑到平板电脑再到手机,都能保持良好的用户体验。 在设计上,DetailAdmin模板通常包含多个预设的页面布局和组件,如仪表板、图表、表格、表单...

    下拉式tab标签导航

    1. **前端框架**:像React、Vue.js或Angular这样的现代前端框架提供了构建此类交互的强大工具。它们支持组件化开发,方便创建可复用的Tab组件,并且有丰富的社区插件和库可供参考。 2. **CSS3**:为了实现上下切换...

    Android,自定义ScrollView,实现过度滑动时回弹效果

    关键在于计算当前滑动的位置,判断是否超过边界,然后模拟出回弹的动画效果。以下是一些核心步骤: 1. **创建自定义ScrollView类**:创建一个新的Java类,例如`OverScrollView`,并继承自`ScrollView`。 ```java ...

    javascript入门之window对象【新手必看】

    JavaScript中的Window对象是Web开发中不可或缺的一部分,尤其对于JavaScript初学者而言,理解并掌握它至关重要。Window对象既是浏览器对象模型(BOM)的核心,也是所有全局变量和函数的容器。这意味着,无论在何处...

    流星雨程序源代码

    - **数组X、Y、W、Vx、Vy**:分别表示每个流星在屏幕上的初始横坐标、纵坐标、宽度、水平速度、垂直速度。 - **数组H**:表示每个流星的高度。 - **数组t**:记录每个流星运动的时间。 - **变量timeOut**:设置...

Global site tag (gtag.js) - Google Analytics