`

jQuery 判断iPad、iPhone、Android是横屏还是竖屏(window.orientation实现)

阅读更多

在ipad、iphone网页开发中,我们很可能需要判断是横屏或者竖屏。下面就来介绍如何用jQuery判断iPad、iPhone、Android是横屏还是竖屏的方法。

代码如下:

function orient() {

if (window.orientation == 90 || window.orientation == -90) {

//ipad、iphone竖屏;Andriod横屏

$("body").attr("class", "landscape");

orientation = 'landscape';

return false;

} else if (window.orientation == 0 || window.orientation == 180) {

//ipad、iphone横屏;Andriod竖屏

$("body").attr("class", "portrait");

orientation = 'portrait';

return false;

}

}

//页面加载时调用

$(function() {

orient();

});

//用户变化屏幕方向时调用

$(window).bind('orientationchange', function(e) {

orient();

});

 

 

屏幕方向对应的window.orientation值:

ipad:90或 - 90横屏

ipad:0或180竖屏

Andriod:0或180横屏

Andriod:90或 - 90竖屏

分享到:
评论

相关推荐

    基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码

    代码如下:function orient() {if (window.orientation == 90 || window.orientation == -90) {//ipad、iphone竖屏;Andriod横屏$(“body”).attr(“class”, “landscape”);orientation = ‘landscape’;return ...

    jquery手写签名 可横屏.rar

    在这个例子中,我们根据窗口的`orientation`属性判断当前是横屏还是竖屏,然后相应地调整canvas的宽高。 此外,项目可能还包含了一些附加功能,如清除签名、保存签名、预览签名等。例如,我们可以添加一个按钮来...

    使用JavaScript判断手机浏览器是横屏还是竖屏问题

    要使用JavaScript判断手机浏览器的横竖屏状态,可以利用`window.orientation`属性。这个属性返回一个整数值,表示设备的方向。在不同的设备和操作系统中,`window.orientation`的值可能会有所不同: - 当设备处于竖...

    jquery+html5 手写签名横屏

    在移动设备上实现手写签名功能,是一种常见且实用的需求,尤其在电子文档签署、在线表单填写等场景中。本项目使用了jQuery、HTML5和CSS3技术,结合横屏模式,创建了一个完整的手动签名解决方案,具备完美的回显功能...

    移动端 jquery+html5 手写签名(横屏)

    2. 使用jQuery监听设备方向变化:当设备旋转至横屏时,调整canvas元素的宽度和高度,确保签名区域适应新的屏幕尺寸。 3. JavaScript初始化画布:获取canvas的2D绘图上下文,设置线条颜色、宽度等属性。 4. 监听...

    jquery判断iPhone、Android设备类型

    在介绍如何使用jQuery判断iPhone、Android设备类型时,我们需要了解几个关键的概念和技术点。首先,我们要知道用户代理字符串(User-Agent String)是一个重要的数据信息,它由各种网络浏览器、操作系统、应用程序等...

    iPhone,iPad,AndroidWeb开发经验1.pdf

    iPhone/iPad/Android Web开发经验1 本文主要讲述了iPhone/iPad/Android Web开发经验,涵盖了前端使用技术、jQtouch插件、iPhone特性等方面的知识点。 一、前端使用技术 在iPhone/iPad/Android Web开发中,前端...

    jquery仿IPad应用

    在jQuery中,可以使用`$(window).width()`来获取窗口宽度,并根据宽度变化调整布局,实现响应式设计。结合媒体查询(Media Queries)可以让网页在不同设备上呈现出最佳视觉效果。 2. **页面滑动效果**:iPad的平滑...

    jQuery实现的iPhone Retina显示屏图片放大效果

    本文将深入探讨如何使用jQuery实现iPhone Retina显示屏的图片放大效果。 首先,理解Retina显示屏的基本原理至关重要。Retina显示屏的像素密度是标准显示屏的两倍,这意味着相同物理尺寸的Retina屏幕具有更多的像素...

    H5签名横屏jSignature源代码(完整版,可直接运行)

    H5签名横屏jSignature源代码(完整版,可直接运行),本实例可以直接运行,内容包括jsignature插件,以及css相关的内容,本实例为手机横向屏签名,保存为图片。图片格式可选。如果想看竖屏签名的实例,可以访问本...

    jquery制作仿iphone苹果手机界面触屏切换效果.rar

    jquery制作仿iphone苹果手机界面触屏切换效果.rarjquery制作仿iphone苹果手机界面触屏切换效果.rarjquery制作仿iphone苹果手机界面触屏切换效果.rarjquery制作仿iphone苹果手机界面触屏切换效果.rarjquery制作仿...

    jQuery 实现网页整屏横向、纵向滚动切换特效.rar

    jQuery 控制网页整屏横向、垂直滚动切换,意思是,它与Tab大体上类似,但是TAB只控制某个Division标签,这一个控制的是整个网页,点击页面询问的序号,当前网页会滚动出去,然后第二屏滚动进来,形成连贯的滚屏效果...

    uniapp的移动端h5的横屏电子签名

    自定义一个h5页面,实现可以横屏手写电子签名的功能,且支持回显(图片可以转化为签字版的canvas,且支持在此基础上继续进行手写签名)由于uniapp微信小程序支持横竖屏切换配置,但是移动端h5不支持。自定义一个h5...

    jQuery五屏轮播手风琴代码.rar

    jQuery五屏轮播手风琴代码.rar jQuery五屏轮播手风琴代码.rar jQuery五屏轮播手风琴代码.rar jQuery五屏轮播手风琴代码.rar jQuery五屏轮播手风琴代码.rar jQuery五屏轮播手风琴代码.rar jQuery五屏轮播手风琴代码....

    jQuery手风琴图片滑动效果,适合网站横屏内容展示,兼容主流浏览器.rar

    本压缩包中的"jQuery手风琴图片滑动效果,适合网站横屏内容展示,兼容主流浏览器.rar"提供了一种独特的方式来展示网站内容,特别适用于横屏布局,能提升用户体验并优化视觉效果。 首先,我们来详细了解一下jQuery手...

    jquery-3.7.0.min.js(jQuery下载)

    jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...

    jquery Promptu-menu菜单滑动插件制作iphone或ipad主屏幕触摸效果

    标题中的“jquery Promptu-menu菜单滑动插件制作iphone或ipad主屏幕触摸效果”指的是一个基于jQuery的插件,名为Promptu-menu,它旨在为Web应用或网站提供类似于iPhone或iPad主屏幕的触摸交互体验。这个插件设计用于...

Global site tag (gtag.js) - Google Analytics