您的位置：首页 > Web前端 > JavaScript

HTML5移动客户端开发之CSS3、Javascript

2013-03-13 10:03 573 查看
判断android与iPhone区别进行重置视窗和初始化缩放:

1
<script
type=
"text/javascript"
>
//
<![CDATA[
2
document.write(window.navigator.userAgent.match(/android/i)
?
'<meta
name="viewport" content = "width=device-width,target-densitydpi=high-dpi,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />'
 
:
'<meta
name="viewport" content = "width=device-width,initial-scale=0.7,maximum-scale=0.7,user-scalable=no" />'
);
3
//
]]></script>
width：viewport的宽度

height：viewport的高度

initial-scale：初始的缩放比例

minimum-scale：允许用户缩放到的最小比例

maximum-scale：允许用户缩放到的最大比例

user-scalable：用户是否可以手动缩放

根据视窗宽度定义CSS样式:

1
@media
screen
 
and
(
max-width
:
560px
)
{}
2
@media
screen
 
and
(
min-width
:
560px
)
{}
3
@media
screen
 
and
(max-device-
width
:
480px
){}
Webkit 浏览器文本缩放：

1
html{-webkit-text-size-adjust:
none
;}
禁用iPhone浏览器的方本缩放功能;

获取移动设备旋转方向：

1
window.onload=
function
 
initialLoad()
{
2
updateOrientation();
3
}
4
function
 
updateOrientation(){
5
var
 
contentType
= “show_”;
6
switch
(window.orientation){
7
case
 
0:
8
contentType
+= “normal”;
9
break
;
10
case
 
-90:
11
contentType
+= “right”;
12
break
;
13
case
 
90:
14
contentType
+= “left”;
15
break
;
16
case
 
180:
17
contentType
+= “flipped”;
18
break
;
19
}
20
document.getElementById(“page_wrapper”).setAttribute(“class”,
contentType);
21
}
获取移动设备触屏事件：

1
$(
"#u_obj_id"
).bind(
'touchstart'
,
function
 
(e)
{
2
point
= hasTouch ? e.originalEvent.touches[0] :e;
3
//
point 代表触屏点
4
//
some action
5
})
ontouchstart：触屏开始

ontouchmove：拖拽

ontouchend：完成触屏

自动隐藏工具栏：

1
window.addEventListener(
'load'
,
function
()
{
2
setTimeout(scrollTo,
0,0,1); 
3
},
false
);
让IE支持HTML5属性：

1
<!--[if
lt IE
9
]>
2
<script
src=
"http://html5shim.googlecode.com/svn/trunk/html5.js"
></script>
3
<![endif]-->
还需要HTML5元素CSS初始化为块元素：

1
article,
aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
2
display:
block;
3
}
让IE支持媒体查询技术@mediascreen and（）{}的向后兼容：

1
<!--[if
lt IE9]>
2
<script
src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
3
<![endif]-->
Posted on 2012
年 11 月 16 日 by 灰鼠.
This entry was posted in CSS,Javascript.
Bookmark the permalink.
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航