Web APP开发技巧总结
一、META/LINK相关:
1、百度禁止转码
通过百度手机打开网页时,百度可能会对你的网页进行转码,往你页面贴上它的广告。非常之恶心。只是我们能够通过这个meta标签来禁止它:
<meta http-equiv="Cache-Control" content="no-siteapp" />
相关链接:SiteApp 转码声明
2、加入到主屏后的标题(IOS)
<meta name="apple-mobile-web-app-title" content="标题">
3、启用 WebApp 全屏模式(IOS)
当站点加入到主屏幕后再点击进行启动时。可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果)
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
PS:然而,经本人用5S測试,设置”apple-touch-fullscreen”并没有什么卵用。希望了解者能在底部评论告知
4、设置状态栏的背景颜色(IOS)
设置状态栏的背景颜色。仅仅有在 ”apple-mobile-web-app-capable” content=”yes” 时生效
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
content 參数:
default :状态栏背景是白色。
black :状态栏背景是黑色。
black-translucent :状态栏背景是半透明。
假设设置为 default 或 black ,网页内容从状态栏底部開始。 假设设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。
6、移动端手机号码识别(IOS)
在 iOS Safari (其它浏览器和Android均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比方:
7位数字。形如:1234567
带括号及加号的数字。形如:(+86)123456789
双连接线的数字,形如:00-00-00111
11位数字,形如:13800138000
可能还有其它类型的数字也会被识别。
我们能够通过例如以下的meta来关闭电话号码的自己主动识别:
<meta name="format-detection" content="telephone=no" />
但某些时候。你关闭电话自己主动识别后,又希望某些电话号码长按时能够链接到 iPhone 的拨号功能和短信功能。你能够使用下面的方法实现:
(2)开启电话功能:
<a href=”tel:123456″>123456</a>
(3)开启短信功能:
<a href=”sms:123456″>123456</a>
7、移动端邮箱识别(Android)
与电话号码的识别一样。在安卓上会对符合邮箱格式的字符串进行识别。我们能够通过例如以下的meta来管别邮箱的自己主动识别:
<meta content=”email=no” name=”format-detection” />
相同地,我们也能够通过标签属性来开启长按邮箱地址弹出邮件发送的功能:
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
8、加入智能 App 广告条 Smart App Banner(IOS 6+ Safari)
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
9、IOS Web app启动动画
因为iPad 的启动画面是不包含状态栏区域的。所以启动图片须要减去状态栏区域所对应的方向上的20px大小。对应地在retina设备上要减去40px的大小
<!-- iPhone -->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (portrait) -->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<!-- iPad (landscape) -->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) -->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) -->
<link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
(landscape:横屏 | portrait:竖屏)
10、加入到主屏后的APP图标
指定web app加入到主屏后的图标路径,有两种稍微不同的方式:
<!-- 设计原图 -->
<link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">
<!-- 加入高光效果 -->
<link href="short_cut_114x114.png" rel="apple-touch-icon">
apple-touch-icon:在IOS6及下面的版本号会自己主动为图标加入一层高光效果(IOS7開始已使用扁平化的设计风格)
apple-touch-icon-precomposed:使用“设计原图图标”
效果:
图标尺寸:
可通过指定size属性来为不同的设备提供不同的图标(但通常来说,我们仅仅需提供一个114 x 114 pixels大小的图标就可以 )
官方说明例如以下
Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app icons in all four sizes.
For iPhone and iPod touch both of these sizes are required:
57 x 57 pixels
114 x 114 pixels (high resolution)
For iPad, both of these sizes are required:
72 x 72 pixels
144 x 144 (high resolution)
11、优先使用最新版本号 IE 和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
二、HTML/CSS
1、关闭iOS键盘首字母自己主动大写
在iOS中,默认情况下键盘是开启首字母大写的功能的。假设启用这个功能,能够这样:
<input type="text" autocapitalize="off" />
2、关闭iOS输入自己主动修正
和英文输入默认自己主动首字母大写那样,IOS还做了一个功能,默认输入法会开启自己主动修正输入内容,这种话。用户常常要操作两次。
假设不希望开启此功能,我们能够通过input标签属性来关闭掉:
<input type="text" autocorrect="off" />
3、禁止文本缩放
当移动设备横竖屏切换时。文本的大小会又一次计算,进行对应的缩放,当我们不须要这种情况时,能够选择禁止:
html {
-webkit-text-size-adjust: 100%;
}
须要注意的是,PC端的该属性已经被移除,该属性在移动端要生效,必须设置 `meta viewport’。
4、移动端怎样清除输入框内阴影
在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,假设不须要阴影。能够这样关闭:
input,
textarea {
border: 0; /* 方法1 */
-webkit-appearance: none; /* 方法2 */
}
5、高速回弹滚动
我们先来看看回弹滚动在手机浏览器发展的历史:
早期的时候,移动端的浏览器都不支持非body元素的滚动栏,所以一般都借助 iScroll;
Android 3.0/iOS攻克了非body元素的滚动问题,但滚动栏不可见,同一时候iOS上仅仅能通过2个手指进行滚动;
Android 4.0攻克了滚动栏不可见及添加了高速回弹滚动效果,只是随后这个特性又被移除。
iOS从5.0開始攻克了滚动栏不可见及添加了高速回弹滚动效果
在iOS上假设你想让一个元素拥有像 Native 的滚动效果。你能够这样做:
.xxx {
overflow: auto; /* auto | scroll */
-webkit-overflow-scrolling: touch;
}
PS:iScroll用过之后感觉不是非常好。有一些诡异的bug,这里推荐另外一个 iDangero Swiper,这个插件集成了滑屏滚动的强大功能(支持3D)。并且还有回弹滚动的内置滚动栏,官方地址:
http://www.idangero.us/sliders/swiper/index.php
6、移动端禁止选中内容
假设你不想用户能够选中页面中的内容,那么你能够在css中禁掉:
.user-select-none {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all (移动端不须要) */
-ms-user-select: none; /* IE 10+ */
}
7、移动端取消touch高亮效果
在做移动端页面时,会发现全部a标签在触发点击时或者全部设置了伪类 :active 的元素,默认都会在激活状态时,显示高亮框。假设不想要这个高亮。那么你能够通过css下面方法来进行全局的禁止:
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
但这种方法在三星的机子上无效,有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签,能够解决问题。
8、怎样禁止保存或拷贝图像(IOS)
通常当你在手机或者pad上长按图像 img ,会弹出选项 存储图像 或者 拷贝图像。假设你不想让用户这么操作。那么你能够通过下面方法来禁止:
img { -webkit-touch-callout: none; }
posted on 2017-06-14 11:21 yjbjingcha 阅读(174) 评论(0) 编辑 收藏 举报