突袭HTML5之Canvas 2D入门5-事件与动画 -android100学习网
突袭HTML5之Canvas 2D入门5-事件与动画
Canvas & SVG & DOM 　　Canvas与SVG都是2D绘图的利器，除此之外，使用CSS、DOM也可以实现某些性状的绘制，而且在动画中，也都可以使用这些技术实现动画效果。这里就简...
Canvas & SVG & DOM
　　Canvas与SVG都是2D绘图的利器，除此之外，使用CSS、DOM也可以实现某些性状的绘制，而且在动画中，也都可以使用这些技术实现动画效果。这里就简单比较一下这些技术。
•&canvas：canvas是以画像素的形式画出图形，它没有shape和vector的概念。所以就没有对象去接受事件，它只是去绘制像素点。这是缺点，也是优点。
•&SVG：SVG是基于vector来绘制shape。每个shape都可以接受事件。向量图的最大优势就是缩放不失真。这是canvas做不到的。
•&CSS：CSS是对DOM对象添加样式的。因为canvas中没有DOM对象，所以不能对canvas中的图形使用CSS。CSS只能作用于canvas自身，比如背景色、边框，但是也仅限于此。
•&DOM动画：DOM定义了屏幕上的一切对象。DOM动画，不管是使用CSS实现，还是使用Javascript实现，都可以做的比canvas平滑。但是这是与浏览器实现相关的。
　　从上面看到，canvas的限制很多，那么我们为什么还要使用cavas呢？
　　首先，canvas是更底层的技术，你能方便的控制绘制过程，内存使用量也比较低，但是代价就是需要写更多的代码。SVG的优势在于可以利用现有的shape去绘制。CSS或者DOM动画的优势在于动画大范围的区域。
　　其次，如果你想去对图，图形，动态图表，视频游戏使用3D的变换时，canvas是比较好的选择。
　　此外还有一点要注意，canvas对2D绘图提供了直接的API支持，但是3D的API是WebGL提供的。WebGL是更底层的技术，难于使用，但是也更加强大。
　　事件是的基础，这里也简单介绍一下canvas的事件。canvas没有定义任何新的事件，你仍然可以像以前那样去监听任何的鼠标事件。上面也说到了，canvas的内部就是一系列的像素，它们不响应任何的事件，所以浏览器不知道canvas内部是什么东西。
　　如果你想让内部的图形接受事件，对canvas来说几乎是不可能呢。但是幸运的是，你还是可以知道给定的点在不在当前的path中，例子如下：
c.beginPath();
&&& 100,100, 40,& //40 pix radius circle at 100,100
&&& 0,Math.PI*2,& //0 to 360 degrees for a full circle
c.closePath();
var a = c.isPointInPath(80,0);&&&& // returns true
var b = c.isPointInPath(200,100);& // returns false
　　检测点是否在一个图形(规则的图形，比如说自己画的按钮)中，通常的做法是比较该点的坐标与图形的各个顶点的坐标。
　　动画的基本思路是用脚本去操控canvas对象，这样要实现一些交互动画也是相当容易的。只不过，canvas不是专门为动画而设计的（不像Flash），所以操作起来会有些限制。
　　最大的限制就是图像一旦绘制出来，它就是一直保持那样了。如果需要移动它，我们不得不重绘所有的东西。重绘是相当费时的，而且性能依赖于电脑的速度。
基本动画的步骤：
1.画一帧，需要以下一些步骤：
(1)清空 canvas
　　除非接下来要画的内容会完全充满 canvas(例如背景图)，否则你需要清空所有。最简单的做法就是用clearRect方法。
(2)保存 canvas 状态
　　如果你要改变一些会改变canvas状态的设置(样式，变形之类的)，又要在画每一帧之时都是原始状态的话，你需要先保存一下。
(3)绘制动画图形(animated shapes)
　　这一步才是重绘动画帧，一般的步骤都是去生成新图形，更新已有的图形位置，清除已经移动到canvas外面的图形，最后绘制出新的场景。
(4)恢复canvas状态
　　如果已经保存了canvas的状态，可以先恢复它，然后重绘下一帧。
2.按照一定的设置去计算图形的变换，重绘新的帧，画每一帧的过程是一样的。
通常有两种方式去设置重绘的频率：
(1)定时重绘
　　第一种方式是通过setInterval和setTimeout方法来控制在设定的时间点上执行重绘。
setInterval(animateShape,500);&
setTimeout(animateShape,500);&
　　setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。
不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。
如果你不需要任何交互操作，用setInterval方法定时执行重绘是最适合的了。
(2)特定事件重绘
　　第二个方法，我们可以利用用户输入来实现操控。如果需要做一个游戏，我们可以通过监听用户交互过程中触发的事件(如document的各种keyboard，mouse事件)来控制动画效果。
下面的例子采用第一种方式模拟一个简单的下雪场景，loop方法定义了每一帧的需要进行的操作：
&canvas width="800" height="600" id="canvas"&&/canvas&
var canvas = document.getElementById('canvas');
var particles = [];
var tick = 0;
function loop() {
&&& createParticles();
&&& updateParticles();
&&& killParticles();
&&& drawParticles();
function createParticles() {
&&& //check on every 10th tick check
&&& if(tick % 10 == 0) {
&&&&&&& if(particles.length & 100) {
&&&&&&&&&&& particles.push({
&&&&&&&&&&&&&&&&&&& x: Math.random()*canvas.width,
&&&&&&&&&&&&&&&&&&& y: 0,
&&&&&&&&&&&&&&&&&&& speed: 2+Math.random()*3, //between 2 and 5
&&&&&&&&&&&&&&&&&&& radius: 5+Math.random()*5, //between 5 and 10
&&&&&&&&&&&&&&&&&&& color: "white",
&&&&&&&&&&& });
function updateParticles() {
&&& for(var i in particles) {
&&&&&&& var part = particles[i];
&&&&&&& part.y += part.
function killParticles() {
&&& for(var i in particles) {
&&&&&&& var part = particles[i];
&&&&&&& if(part.y & canvas.height) {
&&&&&&&&&&& part.y = 0;
function drawParticles() {
&&& var c = canvas.getContext('2d');
&&& c.fillStyle = "black";
&&& c.fillRect(0,0,canvas.width,canvas.height);
&&& for(var i in particles) {
&&&&&&& var part = particles[i];
&&&&&&& c.beginPath();
&&&&&&& c.arc(part.x,part.y, part.radius, 0, Math.PI*2);
&&&&&&& c.closePath();
&&&&&&& c.fillStyle = part.
&&&&&&& c.fill();
setInterval(loop,30);
　　精灵动画也是动画常见的技法之一。
　　精灵就是一副小的图片。你可以快速的把它绘制到屏幕上。通常来说，一个精灵就是一个大图片的一部分，这部分也成为精灵片段。这个片段可能包括一个精灵的所有动作，也可能包括一个游戏中所有的角色。通过在不同的帧绘制不同的精灵，实现的动画就是精灵动画。这也是典型的翻书型的动画，大家小时候在书上肯定画过不少这种类型的动画。
　　为什么要使用精灵呢？
主要有下面一些优点：
1.精灵是一副小图片，所以绘制速度很快。特别是相对于比较复杂的vector。
2.重复绘制一个对象很多次时，使用精灵比较方便。比如空战游戏中的子弹，满屏幕都是，这个可以就加载一次子弹精灵，然后不断的去绘制。
3.精灵可以快速、方便的下载。只要下载一副图片，所有的精灵就都下载下来了。这比下载很多的小图片要方便，而起内存占用量也比较小。
4.耦合性比较低，容易升级精灵。因为你的代码只知道要不停的播放精灵，并不关心精灵的内容。这样后期想更换精灵形象的时候就很方便，只要把图片修改一下即可。
绘制精灵的过程很简单，前面其实已经讲过了，精灵是小的图片，直接使用绘制图片的API：context.drawImage绘制即可。
　　我们从上面也看到了，canvas动画在每一帧都要重画，这是很耗时的。为了提升动画效率，我们需要优化绘制过程。这里总的准则就是“少画”。
•&不要绘制看不见的对象。
•&使用精灵而不是大量的图形。对于于一些不会变的对象，事先使用photoshop绘制好吧。通常图片比复杂的vector绘制的更快，特别是当需要重复绘制的时候。
•&使用缓存。可以在运行的时候创建一个看不见的canvas作为缓存。程序空闲的时候可以先绘制图形到这个缓存中，需要使用的时候，直接拷贝就可以了。这个与直接使用图片有相似的效果。
•&使用图片拉伸实现一些特效。大多数的canvas实现都优化了图片的拉伸和切割代码，所以有些时候使用图片实现某些效果是比较快的。
•&只重绘需要重绘的部分。
•&减少帧数。通常帧数越高，动画越平滑，但是超过60fps也就没什么效果了，因为大多数显示器的刷新率就是60。所以选取合适的帧数即可以达到优化，有可以达到平滑的目的。
少画就是不画，哈哈。如果背景是不变的，那么就可以放到Browser中，然后把canvas背景设置成transparent就可以了。如果有大范围的动画，那么用CSS实现吧，因为CSS是通过C代码实现的，效率比JS高。
•&点对点绘制。如果可以，保证网格坐标系与像素坐标系一致吧，某些浏览器在这种情况下，绘制效率比较高。
canvas基本就这些内容了，Over。
摘自& 沙场秋点兵&HTML5 Canvas的事件处理介绍
作者：佚名
字体：[ ] 来源：互联网 时间：04-24 16:51:06
这篇文章主要介绍了HTML5 Canvas的事件处理介绍,本文讲解了Canvas的限制、给Canvas元素绑定事件、isPointInPath方法、循环重绘和事件冒泡等内容,需要的朋友可以参考下
DOM是Web前端领域非常重要的组成部分，不仅在处理HTML元素时会用到DOM，图形编程也同样会用到。比如SVG绘图，各种图形都是以DOM节点的形式插入到页面中，这就意味着可以使用DOM方法对图形进行操作。比如有一个&path id=&p1&&元素，可以直接用jquery增加click事件$('#p1').click(function(){&})&。然而这种DOM处理方法在HTML5的Canvas里不再适用，Canvas使用的是另外一套机制，无论在Canvas上绘制多少图形，Canvas都是一个整体，图形本身实际都是Canvas的一部分，不可单独获取，所以也就无法直接给某个图形增加JavaScript事件。
Canvas的限制
在Canvas里，所有图形都绘制在帧上，绘制方法不会将绘制好的图形元素作为一个返回值输出，js也无法获取到已经绘制好的图形元素。比如：
代码如下:cvs = document.getElementById('mycanvas');ctx = canvas.getContext('2d');theRect = ctx.rect(10, 10, 100, 100);ctx.stroke();console.log(theRect);
//undefined
这段代码在canvas标签里绘制了一个矩形，首先可以看到绘制图形的rect方法没有返回值。如果打开浏览器的开发者工具，还可以看到canvas标签内部没有增加任何内容，而在js里获取到的canvas元素以及当前的上下文，也都没有任何表示新增图形的内容。
所以，前端常用的dom方法在canvas里是不适用的。比如点击上面Canvas里的矩形，实际点击的是整个Canvas元素。
给Canvas元素绑定事件
由于事件只能达到Canvas元素这一层，所以，如果想进一步深入，识别点击发生在Canvas内部的哪一个图形上，就需要增加代码来进行处理。基本思路是：给Canvas元素绑定事件，当事件发生时，检查事件对象的位置，然后检查哪些图形覆盖了该位置。比如上面的例子里画过一个矩形，该矩形覆盖x轴10-110、y轴10-110的范围。只要鼠标点击在这个范围里，就可以视为点击了该矩形，也就可以手动触发矩形需要处理的点击事件。思路其实比较简单，但是实现起来还是稍微有点复杂。不仅要考虑这个判断过程的效率，有些地方还需要重新判断事件类型，设置要重新定义一个Canvas内部的捕获和冒泡机制。
首先要做的，是给Canvas元素绑定事件，比如Canvas内部某个图形要绑定点击事件，就需要通过Canvas元素代理该事件：
代码如下:cvs = document.getElementById('mycanvas');cvs.addEventListener('click', function(e){
//...}, false);
接下来需要判断事件对象发生的位置，事件对象e的layerX和layerY属性表示Canvas内部坐标系中的坐标。但是这个属性Opera不支持，Safari也打算移除，所以要做一些兼容写法：
代码如下:function getEventPosition(ev){
if (ev.layerX || ev.layerX == 0) {
x = ev.layerX;
y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
return {x: x, y: y};}//注：使用上面这个函数，需要给Canvas元素的position设为absolute。
现在有了事件对象的坐标位置，下面就要判断Canvas里的图形，有哪些覆盖了这个坐标。
isPointInPath方法
Canvas的isPointInPath方法可以判断当前上下文的图形是否覆盖了某个坐标，比如：
代码如下:cvs = document.getElementById('mycanvas');ctx = canvas.getContext('2d');ctx.rect(10, 10, 100, 100);ctx.stroke();ctx.isPointInPath(50, 50);
//truectx.isPointInPath(5, 5);
//false接下来增加一个事件判断，就可以判断一个点击事件是否发生在矩形上：
代码如下:cvs.addEventListener('click', function(e){
p = getEventPosition(e);
if(ctx.isPointInPath(p.x, p.y)){
//点击了矩形
}}, false);以上就是处理Canvas事件的基本方法，但是上面的代码还有局限，由于isPointInPath方法仅判断当前上下文环境中的路径，所以当Canvas里已经绘制了多个图形时，仅能以最后一个图形的上下文环境来判断事件，比如：代码如下:cvs = document.getElementById('mycanvas');ctx = canvas.getContext('2d');ctx.beginPath();ctx.rect(10, 10, 100, 100);ctx.stroke();ctx.isPointInPath(20, 20);
//truectx.beginPath();ctx.rect(110, 110, 100, 100);ctx.stroke();ctx.isPointInPath(150, 150);
//truectx.isPointInPath(20, 20);
//false从上面这段代码可以看到，isPointInPath方法仅能识别当前上下文环境里的图形路径，而之前绘制的路径，无法回溯判断。这种问题的解决方法是：当点击事件发生时，重绘所有图形，每绘制一个就使用isPointInPath方法，判断事件坐标是否在该图形覆盖范围内。
循环重绘和事件冒泡
为了实现循环重绘，所以就要将图形的基本参数事先保存下来：代码如下:arr = [
{x:10, y:10, width:100, height:100},
{x:110, y:110, width:100, height:100}]; cvs = document.getElementById('mycanvas');ctx = canvas.getContext('2d'); draw(); function draw(){
ctx.clearRech(0, 0, cvs.width, cvs.height);
arr.forEach(function(v){
ctx.beginPath();
ctx.rect(v.x, v.y, v.width, v.height);
ctx.stroke();
});}上面的代码事先将两个矩形的基本参数保存下来，每次调用draw方法，就会循环调用这些基本参数，用于绘制两个矩形。这里还使用了clearRect方法，用于在重绘时清空画布。接下来要做的是增加事件代理，以及在重绘时对每一个上下文环境使用isPointInPath方法：
代码如下:cvs.addEventListener('click', function(e){
p = getEventPosition(e);
draw(p);}, false);事件发生时，将事件对象的坐标传给draw方法处理。这里还需要对draw方法做一些小改动：
代码如下:function draw(p){
var who = [];
ctx.clearRech(0, 0, cvs.width, cvs.height);
arr.forEach(function(v, i){
ctx.beginPath();
ctx.rect(v.x, v.y, v.width, v.height);
ctx.stroke();
if(p && ctx.isPointInPath(p.x, p.y)){
//如果传入了事件坐标，就用isPointInPath判断一下
//如果当前环境覆盖了该坐标，就将当前环境的index值放到数组里
who.push(i);
//根据数组中的index值，可以到arr数组中找到相应的元素。}在上面代码中，点击事件发生时draw方法会执行一次重绘，并在重绘过程中检查每一个图形是否覆盖了事件坐标，如果判断为真，则视为点击了该图形，并将该图形的index值放入数组，最后将数组作为draw方法的返回值。在这种处理机制下，如果Canvas里有N个图形，它们有一部分是重叠的，而点击事件恰巧发生在这个重叠区域上，那么draw方法的返回数组里会有N个成员。这时就有点类似事件冒泡的情况，数组的最后一个成员处于Canvas最上层，而第一个成员则在最下层，我们可以视为最上层的成员是e.target，而其他成员则是冒泡过程中传递到的节点。当然这只是最简单的一种处理方法，如果真要模拟DOM处理，还要给图形设置父子级关系。
以上就是Canvas事件处理的基本方法。在实际运用时，如何缓存图形参数，如何进行循环重绘，以及如何处理事件冒泡，都还需要根据实际情况花一些心思去处理。另外，click是一个比较好处理的事件，相对麻烦的是mouseover、mouseout和mousemove这些事件，由于鼠标一旦进入Canvas元素，始终发生的都是mousemove事件，所以如果要给某个图形单独设置mouseover或mouseout，还需要记录鼠标移动的路线，给图形设置进出状态。由于处理的步骤变得复杂起来，必须对性能问题提高关注。
大家感兴趣的内容
12345678910
最近更新的内容插件描述：html5 canvas首屏自适应背景动画循环效果代码
相关插件-动画效果,背景
讨论这个项目（37）回答他人问题或分享插件使用方法奖励jQ币
IT狂人Paul0
效果 吊炸天 佩服作者不收币共享
使用在哪里，眼睛都花了，但是超过吊炸天了
兼容性如何？
好看不错 哦
STR-Liang0
谢谢老板，已下载。。
超赞，楼主可以啊
我不是子夜歌0
不能再这页面上增加按钮吗
要定位提高层级吧！
PROMULGATOR
joomla-brother
河南省郑州市
关注作者 (53)
收藏此插件 (531)
我当前jQ币余额：正在获取..
已下载次数：6031
所需jQ币：0查看: 48390|回复: 10
html5屏幕旋转事件，html5如何实现屏幕旋转
主题帖子积分
中级会员, 积分 260, 距离下一级还需 240 积分
中级会员, 积分 260, 距离下一级还需 240 积分
html5屏幕旋转事件 onorientationchange
很多用html5开发移动应用的童鞋不知道怎么实现监听屏幕旋转，下面为大家介绍html5如何实现屏幕旋转
添加屏幕旋转事件侦听，可随时发现屏幕旋转状态（左旋、右旋还是没旋）。
// 判断屏幕是否旋转4. 屏幕旋转事件：onorientationchange
添加屏幕旋转事件侦听，可随时发现屏幕旋转状态（左旋、右旋还是没旋）。例子：
// 判断屏幕是否旋转
function orientationChange() {
& & switch(window.orientation) {
& & 　　case 0:
& && && && &alert(&肖像模式 0,screen-width: & + screen.width + &; screen-height:& + screen.height);
& && && && &
& & 　　case -90:
& && && && &alert(&左旋 -90,screen-width: & + screen.width + &; screen-height:& + screen.height);
& && && && &
& & 　　case 90:& &
& && && && &alert(&右旋 90,screen-width: & + screen.width + &; screen-height:& + screen.height);
& && && && &
& & 　　case 180:& &
& && &&&　　alert(&风景模式 180,screen-width: & + screen.width + &; screen-height:& + screen.height);
& && &&&　　
& & };&br&};
// 添加事件监听
addEventListener('load', function(){
& & orientationChange();
& & window.onorientationchange = orientationC
主题帖子积分
中级会员, 积分 260, 距离下一级还需 240 积分
中级会员, 积分 260, 距离下一级还需 240 积分
我们在开发Mobile Web应用时，一个最佳实践就是采用流式布局，保证最大可能地利用有限的屏幕空间。window.orientation属性与onorientationchange事件& &
window.orientation :这个属性给出了当前设备的屏幕方向，0表示竖屏，正负90表示横屏（向左与向右）模式
onorientationchange : 在每次屏幕方向在横竖屏间切换后，就会触发这个window事件，用法与传统的事件类似复制代码1：使用onorientationchange事件的回调函数，来动态地为body标签添加一个叫orient的属性，同时以body[orient=landspace]或body[orient=portrait]的方式在css中定义对应的样式，这样就可以实现在不同的屏幕模式下显示不同的样式。如下代码示例：
Html代码&!Doctype html&&&
& & &html&&&
& && &&&&head&&&
& && && && &&meta charset=&utf-8&&&&
& && && && &&meta id=&viewport& name=&viewport& content=&width=device-width,initial-scale=1.0;&&&&
& && && && &&title&横竖屏切换检测&/title&&&
& && && && &&style type=&text/css&&&&
& && && && && & body[orient=landscape]{&&
& && && && && && &&&background-color: #ff0000;&&
& && && && && & }&&
& && &
& && && && && & body[orient=portrait]{&&
& && && && && && &&&background-color: #00&&
& && && && && & }&&
& && && && &&/style&&&
& && &&&&/head&&&
& && &&&&body orient=&landspace&&&&
& && && && &&div&&&
& && && && && & 内容&&
& && && && &&/div&&&
& && && && &&script type=&text/javascript&&&&
& && && && && & (function(){&&
& && && && && && &&&if(window.orient==0){&&
& && && && && && && && &document.body.setAttribute(&orient&,&portrait&);&&
& && && && && && &&&}else{&&
& && && && && && && && &document.body.setAttribute(&orient&,&landscape&);&&
& && && && && && &&&}&&
& && && && && & })();&&
& && && && && & window.onorientationchange=function(){&&
& && && && && && &&&var body=document.&&
& && && && && && &&&var viewport=document.getElementById(&viewport&);&&
& && && && && && &&&if(body.getAttribute(&orient&)==&landscape&){&&
& && && && && && && && &body.setAttribute(&orient&,&portrait&);&&
& && && && && && &&&}else{&&
& && && && && && && && &body.setAttribute(&orient&,&landscape&);&&
& && && && && && &&&}&&
& && && && && & };&&
& && && && &&/script&&&
& && &&&&/body&&&
& & &/html&&&复制代码2: 类似的思路，不通过CSS的属性选择器来实现，如下代码的实现方案：
Html代码&!Doctype html&&&
& & &html&&&
& && &&&&head&&&
& && && && &&meta charset=&utf-8&&&&
& && && && &&meta id=&viewport& name=&viewport& content=&width=device-width,initial-scale=1.0;&&&&
& && && && &&title&横竖屏切换检测&/title&&&
& && && && &&style type=&text/css&&&&
& && && && && & .landscape body {&&
& && && && && && &&&background-color: #ff0000;&&
& && && && && & }&&
& && &
& && && && && & .portrait body {&&
& && && && && && &&&background-color: #00&&
& && && && && & }&&
& && && && &&/style&&&
& && &&&&/head&&&
& && &&&&body orient=&landspace&&&&
& && && && &&div&&&
& && && && && & 内容&&
& && && && &&/div&&&
& && && && &&script type=&text/javascript&&&&
& && && && && & (function(){&&
& && && && && && &&&var init=function(){&&
& && && && && && && && &var updateOrientation=function(){&&
& && && && && && && && && & var orientation=window.&&
& && && && && && && && && & switch(orientation){&&
& && && && && && && && && && &&&case 90:& &
& && && && && && && && && && &&&case -90:&&
& && && && && && && && && && && && &orientation=&landscape&;&&
& && && && && && && && && && && && &&&
& && && && && && && && && && &&&default:&&
& && && && && && && && && && && && &orientation=&portrait&;&&
& && && && && && && && && && && && &&&
& && && && && && && && && & }&&
& && && && && && && && && & document.body.parentNode.setAttribute(&class&,orientation);&&
& && && && && && && && &};&&
& && &
& && && && && && && && &window.addEventListener(&orientationchange&,updateOrientation,false);&&
& && && && && && && && &updateOrientation();&&
& && && && && && &&&};&&
& && && && && && &&&window.addEventListener(&DOMContentLoaded&,init,false);&&
& && && && && & })();&&
& && && && &&/script&&&
& && &&&&/body&&&
& & &/html&&&复制代码使用media query方式
& & 这是一种更为方便的方式，使用纯CSS就实现了对应的功能，如下代码演示：
Html代码&&收藏代码&!Doctype html&&&
& & &html&&&
& && &&&&head&&&
& && && && &&meta charset=&utf-8&&&&
& && && && &&meta id=&viewport& name=&viewport& content=&width=device-width,initial-scale=1.0;&&&&
& && && && &&title&横竖屏切换检测&/title&&&
& && && && &&style type=&text/css&&&&
& && && && && & @media all and (orientation : landscape) {&&
& && && && && && &&&body {& &
& && && && && && && && &background-color: #ff0000;& &
& && && && && && &&&}&&
& && && && && & }&&
& && &
& && && && && & @media all and (orientation : portrait){&&
& && && && && && &&&body {&&
& && && && && && && && &background-color: #00ff00;&&
& && && && && && &&&}&&
& && && && && & }&&
& && && && &&/style&&&
& && &&&&/head&&&
& && &&&&body&&&
& && && && &&div&&&
& && && && && & 内容&&
& && && && &&/div&&&
& && &&&&/body&&&
& & &/html&&&
复制代码低版本浏览器的平稳降级
& &&&如果目标移动浏览器不支持media query，同时window.orientation也不存在，则我们需要采用另外一种方式来实现————使用定时器“伪实时”地对比当前窗口的高(window.innerHeight)与宽(window.innerWidth)之比，从而判定当前的横竖屏状态。如下代码所示：
Html代码&!Doctype html&&&
& & &html&&&
& && &&&&head&&&
& && && && &&meta charset=&utf-8&&&&
& && && && &&meta id=&viewport& name=&viewport& content=&width=device-width,initial-scale=1.0;&&&&
& && && && &&title&按键&/title&&&
& && && && &&style type=&text/css&&&&
& && && && && & .landscape body {&&
& && && && && && &&&background-color: #ff0000;&&
& && && && && & }&&
& && &
& && && && && & .portrait body {&&
& && && && && && &&&background-color: #00&&
& && && && && & }&&
& && && && &&/style&&&
& && && && &&script type=&text/javascript&&&&
& && && && && & (function(){&&
& && && && && && &&&var updateOrientation=function(){&&
& && && && && && && && &var orientation=(window.innerWidth & window.innerHeight)? &landscape& : &portrait&;&&
& && && && && && && && &document.body.parentNode.setAttribute(&class&,orientation);&&
& && && && && && &&&};&&
& && &
& && && && && && &&&var init=function(){&&
& && && && && && && && &updateOrientation();&&
& && && && && && && && &window.setInterval(updateOrientation,5000);&&
& && && && && && &&&};&&
& && && && && && &&&window.addEventListener(&DOMContentLoaded&,init,false);&&
& && && && && & })();&&
& && && && &&/script&&&
& && &&&&/head&&&
& && &&&&body&&&
& && && && &&div&&&
& && && && && & 内容&&
& && && && &&/div&&&
& && &&&&/body&&&
& & &/html&&&复制代码统一解决方案
将以上的两种解决方案整合在一起，就可以实现一个跨浏览器的解决方案，如下代码：
Html代码
& & &!Doctype html&&&
& & &html&&&
& && &&&&head&&&
& && && && &&meta charset=&utf-8&&&&
& && && && &&meta id=&viewport& name=&viewport& content=&width=device-width,initial-scale=1.0;&&&&
& && && && &&title&横竖屏切换检测&/title&&&
& && && && &&style type=&text/css&&&&
& && && && && & .landscape body {&&
& && && && && && &&&background-color: #ff0000;&&
& && && && && & }&&
& && &
& && && && && & .portrait body {&&
& && && && && && &&&background-color: #00&&
& && && && && & }&&
& && && && &&/style&&&
& && && && &&script type=&text/javascript&&&&
& && && && && & (function(){&&
& && && && && && &&&var supportOrientation=(typeof window.orientation == &number& && typeof window.onorientationchange == &object&);&&
& && &
& && && && && && &&&var updateOrientation=function(){&&
& && && && && && && && &if(supportOrientation){&&
& && && && && && && && && & updateOrientation=function(){&&
& && && && && && && && && && &&&var orientation=window.&&
& && && && && && && && && && &&&switch(orientation){&&
& && && && && && && && && && && && &case 90:&&
& && && && && && && && && && && && &case -90:&&
& && && && && && && && && && && && && & orientation=&landscape&;&&
& && && && && && && && && && && && && &&&
& && && && && && && && && && && && &default:&&
& && && && && && && && && && && && && & orientation=&portrait&;&&
& && && && && && && && && && &&&}&&
& && && && && && && && && && &&&document.body.parentNode.setAttribute(&class&,orientation);&&
& && && && && && && && && & };&&
& && && && && && && && &}else{&&
& && && && && && && && && & updateOrientation=function(){&&
& && && && && && && && && && &&&var orientation=(window.innerWidth & window.innerHeight)? &landscape&:&portrait&;&&
& && && && && && && && && && &&&document.body.parentNode.setAttribute(&class&,orientation);&&
& && && && && && && && && & };&&
& && && && && && && && &}&&
& && && && && && && && &updateOrientation();&&
& && && && && && &&&};&&
& && &
& && && && && && &&&var init=function(){&&
& && && && && && && && &updateOrientation();&&
& && && && && && && && &if(supportOrientation){&&
& && && && && && && && && & window.addEventListener(&orientationchange&,updateOrientation,false);&&
& && && && && && && && &}else{& && &
& && && && && && && && && & window.setInterval(updateOrientation,5000);&&
& && && && && && && && &}&&
& && && && && && &&&};&&
& && && && && && &&&window.addEventListener(&DOMContentLoaded&,init,false);&&
& && && && && & })();&&
& && && && &&/script&&&
& && &&&&/head&&&
& && &&&&body&&&
& && && && &&div&&&
& && && && && & 内容&&
& && && && &&/div&&&
& && &&&&/body&&&
& & &/html&&&复制代码
主题帖子积分
注册会员, 积分 60, 距离下一级还需 140 积分
注册会员, 积分 60, 距离下一级还需 140 积分
小手一抖，钱钱到手！
主题帖子积分
注册会员, 积分 62, 距离下一级还需 138 积分
注册会员, 积分 62, 距离下一级还需 138 积分
小手一抖，钱钱到手！
主题帖子积分
新手上路, 积分 18, 距离下一级还需 32 积分
新手上路, 积分 18, 距离下一级还需 32 积分
好东西，值得收藏
主题帖子积分
新手上路, 积分 4, 距离下一级还需 46 积分
新手上路, 积分 4, 距离下一级还需 46 积分
有用，收下了先！
主题帖子积分
新手上路, 积分 4, 距离下一级还需 46 积分
新手上路, 积分 4, 距离下一级还需 46 积分
这是检测移动端页面是否横屏或者竖屏，另外，我想问一下，是否能够强行将一个手机页面打开就横屏显示？希望有大牛能够指点指点，十分感谢。
主题帖子积分
新手上路, 积分 10, 距离下一级还需 40 积分
新手上路, 积分 10, 距离下一级还需 40 积分
我们在开发Mobile Web应用时，一个最佳实践就是采用流式布局，保证最大可能地利用有限的屏幕空间。1：使用o ...
不得不给楼主一个大大的赞
主题帖子积分
新手上路, 积分 10, 距离下一级还需 40 积分
新手上路, 积分 10, 距离下一级还需 40 积分
不得不给楼主一个大大的赞，太受益
主题帖子积分
注册会员, 积分 50, 距离下一级还需 150 积分
注册会员, 积分 50, 距离下一级还需 150 积分
站长推荐 /1
Ionic(ionicframework)号称未来最有潜力的一款html5移动app开发框架是Angularjs移动端解决方案，Angularjs号称下一代web应用，Ionic移动app开发教程值得拥有
Powered by