移动端常用知识点

本文介绍了移动Web开发中的一些实用技巧,包括viewport设置、屏幕旋转侦测、触摸事件处理等内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原文链接:http://www.lunali.net/artInfo.aspx?type=article&id=5&nid=1


对移动端的开发也不是非常了解,只是做过一些手机端项目,小编今天在这里整理一些常用的移 动开发知识

点,有兴趣的朋友也可以了解一下,当然,如果有所补充,也可发email给小编哦~ ~~
1、viewport :所谓viewport,即除去所有工具栏、状态栏、滚动条等之后用于查看网页的区域,假设现在有
一张报纸摆在你面前,但是这张报纸被一本书压住了,所以你只能看到报纸的一部分,这部分的可视区域就是
指viewport;
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user- scalable=no" />
width = device-width : 设置将宽度设置为设备显示宽度;
initial-scale : 初始的缩放比例 (范围从 0 到10);
maximum-scale : 允许用户缩放到的最大比例;
minimum-scale : 允许用户缩放到的最小比例;
user-scalabl : 用户是否可以手动缩放;


2、在HTML代码中,我们一般通过<meta>进行控制


编码(这个大家应该不陌生):

<meta charset="utf-8" />

屏蔽iPhone下的拨号链接:
<meta name="format-detection" content="telephone=no">


隐藏safari导航栏以及工具栏,全屏显示网页:
<meta name=”apple-mobile-web-app-capable” content=”yes” />




3、如果你想在屏幕旋转时禁止设备自动调整大小:
1
-webkit-text-size-adjust:none;
4、<a href="sms:10010" class="message"></a>  //调取手机短信
<a href="tel:10010" class="call"></a> //调取电话


5、侦测设备旋转方向
iPhone可以在横屏状态下浏览网页,有时候你会想知道用户设备的手持状态来增强可用性和功能。下面一段


Javascript可以判断出设备向哪个方向旋转,并且替换css:

window.onload = function initialLoad() {updateOrientation();}    
function updateOrientation(){ 
    var contentType = "show_"; 
    switch(window.orientation){ 
        case   0: contentType += "normal"; 
                  break;   
        case -90: contentType += "right"; 
                  break; 
        case  90:  contentType += "left"; 
                  break; 
        case 180: contentType += "flipped"; 
                  break; 
    } 
    document.getElementById("page_wrapper").setAttribute("class", contentType); 
 
    }
6、默认隐藏工具栏
iPhone的浏览器工具栏会在页面最顶端,卷动网页后才隐藏。这样在加载网页完成后显得很浪费空间,特别是


横向屏幕时。我们可以让它自动卷动上去,代码如下:
window.addEventListener('load',function(){
   setTimeout(scrollTo,0,0,1);
},false);
7、触摸事件
当用户手指放在屏幕上面时,在屏幕上滑动时或从屏幕上移开时会触发一些相关事件,这类事件称之为触摸事


件,有以下几个:
touchstart  : 当手指触摸屏幕时触发,即使已经有一个手指放在了屏幕上也会触发
touchmove : 当手指在屏幕上滑动时连续的触发
touchend : 当手指从屏幕上移开时触发
touchcance : 当系统停止跟踪触发是触发,关于此类事件的确切触发时间,文档中没有明确说明


上面这几个事件都会冒泡,也都可以取消,每个触摸事件的event对象都提供了在鼠标事件中常见的属性:
bubbles,cancelable,view,clientX,clientY,screenX,screenY,detail,altKey,ctrlKey,shiftKey,metaKey


除了常见的DOM属性外,触摸时间还包含下列3个用于跟踪触摸属性:
touches : 表示当前跟踪的触摸操作的Touch对象的数组
targetTouches : 特定与事件目标的Touch对象的数组
changeTouches : 表示自上次触摸以来发生了什么改变的Touch对象的数组


每个触摸对象包含下列属性:
clientX : 触摸目标在可视区中的X坐标
clientY : 触摸目标在可视区中的Y坐标
pageX :  触摸目标在页面中的X坐标
pageY :  触摸目标在页面中的Y坐标
screenX : 触摸目标在屏幕中的X坐标
screenY : 触摸目标在屏幕中的 Y坐标
target : 触摸的DOM节点目标 identifier : 标识触摸唯一ID
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值