移动web开发常用技巧

*Meta标签

 代码如下 复制代码

//强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
//iphone设备中的safari私有meta标签，允许全屏模式浏览；
<meta content="yes" name="apple-mobile-web-app-capable" />
//iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
//告诉设备忽略将页面中的数字识别为电话号码；
<meta content="telephone=no" name="format-detection" />

*关闭识别后添加链接

关闭识别后添加链接

 代码如下 复制代码
<a href="tel:12345654321">打电话给我</a>
<a href="sms:12345654321">发短信</a>
<span onclick="location.href='tel:122'"></span>

*使用HTML5标签

使用html5标签增强语义，提升体验

*放弃float属性

遇到内容排列排列显示的布局放弃float，使用display、webkit-box自适应布局

*利用CSS3边框背景属性

 代码如下 复制代码

使用-webkit-border-image代替复杂的（圆角+内发光+高光）

*块级化a标签

将每条数据都放在一个a标签中提升用户体验，尽可能的保证用户的可点击区域较大。

*去除Android邮箱地址的识别

 代码如下 复制代码

<meta content="email=no" name="format-detection" />

*去除iOS和Android中的输入URL的控件条

 代码如下 复制代码

setTimeout(scrollTo,0,0,0) 需要放在window.onload里，当前文档的内容高度必须是高于窗口的高度。

*用户旋转设备

禁止开发者阻止浏览器的orientationchange事件

*用户是通过主屏启动你的webapp

IOS 从主屏启动时navigator.standalone为true,从站点为false
Android 无

*关闭iOS中键盘自动大写

 代码如下 复制代码

autocapitalize="off"

*iOS中如何彻底禁止用户在新窗口打开页面

 代码如下 复制代码
IOS -webkit-touch-callout:none;

Android 无效。

*iOS中禁止用户保存图片/复制图片

 代码如下 复制代码

-webkit-touch-callout:none

*iOS中如何禁止用户选中文字

 代码如下 复制代码

-webkit-user-select:none

*iOS中如何获取滚动条的值

 代码如下 复制代码

window.scrollY和window.scrollX

*解决盒子边框溢出

宽度100%时边框溢出，-webkit-box-sizing:border-box;

*Android 2.0以下圆角问题

必须加-webkit-

*android页面自适应

 代码如下 复制代码

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" />

*如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式

<meta name="format-detection" content="telphone=no" />

*样式设置

 代码如下 复制代码

<link rel=”apple-touch-startup-image” href=”startup.png” /> // 设置开始页面图片
<link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> // 在设置书签的时候可以显示好看的图标
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />  www.111cn.net  // 肖像模式样式
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />   // 风景模式样式
<style media="all and (orientation:portrait)"></style> //竖屏时使用的样式
<style media="all and (orientation:landscape)"></style> //横屏时使用的样式

*事件

 代码如下 复制代码

/ 手势事件
touchstart            //当手指接触屏幕时触发
touchmove           //当已经接触屏幕的手指开始移动后触发
touchend             //当手指离开屏幕时触发
touchcancel

// 触摸事件
gesturestart          //当两个手指接触屏幕时触发
gesturechange      //当两个手指接触屏幕后开始移动时触发
gestureend

// 屏幕旋转事件
onorientationchange

// 检测触摸屏幕的手指何时改变方向
orientationchange www.111cn.net

// touch事件支持的相关属性
touches
targetTouches
changedTouches
clientX　　　　// X coordinate of touch relative to the viewport (excludes scroll offset)
clientY　　　　// Y coordinate of touch relative to the viewport (excludes scroll offset)
screenX　　　 // Relative to the screen
screenY 　　  // Relative to the screen
pageX　　 　　// Relative to the full page (includes scrolling)
pageY　　　　 // Relative to the full page (includes scrolling)
target　　　　 // Node the touch event originated from
identifier　　   // An identifying number, unique to each touch event

//屏幕旋转事件：onorientationchange
window.orientation  //0 肖像模式，-90 左旋，90 右旋，180 风景模式

*自动大写与自动修正

 代码如下 复制代码

<input type="text" autocapitalize="off" autocorrect="off" />

*阻止旋转屏幕时自动调整字体大小

 代码如下 复制代码

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

*缩小图片

 代码如下 复制代码

@media screen and (max-device-width: 480px){
　　img{max-width:100%;height:auto;}
}
时间： 2024-09-20 06:03:20

移动web开发常用技巧的相关文章

web开发常用js功能性小技巧

js|web|技巧 web开发常用js功能性小技巧 -------------------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">; <HTML>; <HEAD>; <TITLE>; New Document </TITLE&g

Web 开发常用工具 大家自己查找下载_相关技巧

1.regex-coach --正则表达式工具 开发常用工具 大家自己查找下载_相关技巧-excel常用技巧"> 2. IECookiesView--IE的cookie查看工具 3.Flex Trace Panel --Flex开发日志观察工具 4.IE Development Toolbar --微软提供的IE开发插件 5.sIEve--javascript内存泄漏检测工具 6.HttpAnalyzer--HTTP抓包工具

移动端使用localStorage缓存Js和css文的方法(web开发)_javascript技巧

将jquery和公共样式缓存到localStorage,可以减少Http请求,从而优化页面加载时间,下面的代码可以实现此功能: <script type="text/javascript"> //入口函数 if (window.localStorage) { initJs(); initCss("css", "/gfdzp201508257998/Turntable/Style/css_whir.css"); } else { add

asp.net开发常用技巧收集

asp.net|技巧 1. 打开新的窗口并传送参数: 传送参数: response.write("<script>window.open ('*.aspx?id="+this.DropDownList1.SelectIndex+"&id1="++"')</script>") 接收参数: string a = Request.QueryString("id"); string b = Reques

WEB开发常用的图片格式

1.JPEG       JPEG格式是一种大小与质量相平衡的压缩图片格式.通俗一点讲,就是:高的压缩比=低的图片质量=小的文件大小.反之,低的压缩比=高的图片质量=大的文件大小.由于JPEG文件无法保持100 %的原始图像的像素数据,所以它不被认为是一种无损图像格式. 用途:       由于这种极其敏感的平衡特性,JPEG非常适合被应用在那些允许轻微失真的像素色彩丰富的图片(照片)场合.反之,JPEG格式图片并不适合做简单色彩(色调少)的图片,比如LOGO,各种小图标(ICONS). 2.G

ThinkPHP开发常用技巧

1.可以定义公共的控制器或者Model类来实现相同的功能 2.使用$this->assign赋值的时候太多的话最好用数组的方式 3.volist中获取数据其实可以使用函数和对象的方法的. <volist name=":fun('arg')" id="vo">{$vo.name}</volist> 4.写模版的时候如果用include包含的话,最好将html头部编码设置等都放在要包含的head.html中 5.如果要在方法之前必须得输出一

WEB开发时常用的正则表达式（PHP和Javascript）_正则表达式

在WEB开发中,正则表达式通常用来检测.查找替换某些符合规则的字符串,如检测用户输入E-mai格式是否正确,采集符合规则的页面内容等等. 下面分别用PHP和Javscript向大家介绍WEB开发中最常用最实用的正则表达式及其用法. PHP常用表达式用法1.匹配正整数:/^[1-9]\d*$/ 2.匹配非负整数(正整数+0):/^\d+$/ 3.匹配中文:/^[\x{4e00}-\x{9fa5}]+$/u 4.匹配Email:/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+(

WEB开发者常用手册大集合

问题描述 WEB开发者常用手册大集合整理了一些Web开发常用手册,比较完善好用的版本jQuery1.4.4中文参考手册(CHM)CSS2.0中文参考手册(CHM)CSS3.0中文参考手册(CHM)CSS中文参考手册(CHM涵盖2.0/3.0)微软JScript中文参考手册(CHM)微软VBScript中文参考手册(CHM)微软Windows脚本手册(CHM)DHTML中文参考手册(CHM)SWFObject2.0官方中文文档(PDF)XMLHttp对象中文参考手册(CHM)PHP5中文参考手册(

Web开发人员常用速查手册 英文集合推荐_相关技巧

为了方便各位朋友,本文收集了一些对Web开发人员非常有用的手册,记得推荐一下哦. HTML 速查手册 HTML/XTML in one page HTML5: The Evolution of Web Standards by James Sugrue (X)HTML Elements and Attributes Doctype Declarations (DTDs) XHTML Character Entity Reference GoSquared HTML Help Sheet   CS