webview相关知识

标签类

1.Web App 建议用的样式

用于覆盖 WebView 默认的样式，使得 App 看起来更像原生的 App，——“不露出马脚”

/*
document.documentElement.style.webkitTouchCallout ='none'; //禁止弹出菜单
document.documentElement.style.webkitUserSelect = 'none';//禁止选中
*/
body{
	-webkit-text-size-adjust:none;	/* 字型大小是不會變的，而使用者就無法透過縮放網頁來達成放大字型 */
	-webkit-appearance: none;		/*可以改变按钮或者其它控件看起来类似本地的控件*/
	-webkit-user-drag: none; 		/*-webkit-user-drag CSS 属性控制能否将元素作为一个整体拖动。*/
}
a{
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*很多Android 浏览器的 a 链接有边框，这里取消它 transparent */
}
/* For WebApp */
body{
  -webkit-user-select : none; /* 如果用户长按web网页的文本内容，都会出现选中的行为，提供复制文字等功能。禁止用户选中文字 for iOS */
}
a, img{
  -webkit-touch-callout:none;  /* 在IOS浏览器里面，假如用户长按a标签，都会出现默认的弹出菜单事件。禁止用户在新窗口打开页面、如何禁止用户保存图片＼复制图片 for iOS */
}

2.固定页面宽度

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

3.触控面积

请保证将每条数据都放在一个 a 标签中，并设置其 display: block;，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。

4.调用手机拨电话面板、短信面板

<a href="tel:18005555555">Call us at 1-800-555-5555</a>  

<a href="sms:18005555555">
<a href="sms:18005555555,18005555556">
<a href="sms:18005555555?body="> //大都不支持body参数

安卓新系统支持程度都比较高，遗憾的是 iOS 新版反而不如旧版（旧版采用另外一种写法可以既支持号码又支持内容），详见下图：

5.去除 Android 平台中对手机、邮箱地址的识别

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

6.如何禁止用户旋转设备

iOS已经禁止开发者阻止 orientationchange 事件，那 Android 呢？对不起，我没有找到任何资料说 Android 禁止开发者阻止浏览器 orientationchange 事件，但是在 Android 平台，确实也是阻止不了的。

7.如何关闭 iOS 中键盘自动大写

当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本 webkit 为 input 元素提供了 autocapitalize 属性，通过指定 autocapitalize=”off” 来关闭键盘默认首字母大写。

另，设置是否使用输入的自动更正、自动不全、英文自动首字母大写。

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

8.IE8 CSS Selector

IE8 虽然提供 CSS Selector 的 querySelector()/querySelectorAll()，但搜索不了自定义标签，不过你可以用*[attrib=value]搜索，但效率较低。

样式类

1.自适应布局模式

在编写 CSS 时，不建议把容器的宽度定死。为达到适配各种手持设备，对 ipad、itouch、ipod、iphone、android、web safarik、chrome 都能够正常的显示，你无需再次考虑设备的分辨率。

2.禁止浏览器默认行为

a, img{
  /* 禁止用户在新窗口打开页面、如何禁止用户保存图片＼复制图片 for iOS */
  -webkit-touch-callout:none;
}

*{
  /* 禁止用户选中文字 for iOS */
  -webkit-user-select : none;
  /*很多Android 浏览器的 a 链接有边框，这里取消它*/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

安卓手机取消长按出现“复制”按钮的话，要修改 Webview 默认行为：

webView.setOnLongClickListener(new OnLongClickListener(){
	public boolean onLongClick(View v) {
		return true;
	}
});

3.如何解决盒子边框溢出

当你指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式 -webkit-box-sizing:border-box; 用来指定该盒子的大小包括边框的宽度。

4.解决 CSS3 无法编写高光和内发光

这个时候你不妨使用 -webkit-border-image 来定义这个按钮的样式。 见下面正确代码和效果图：

<style type="text/css">
.bbb{width:300px; height:40px; line-height:40px;border:1px solid #dcdcdc;box-shadow:0px 0px 10px rgba(0,0,0,0.2) inset;border-radius:10px;}
</style>

<div class="bbb">ttttttttttttttttttttt</div>

页面特效类

阻止页面整体滚动

document.body.addEventListener('touchmove', function(event) {
  event.preventDefault();
}, false);

去掉浏览器地址栏

window.setTimeout(scrollTo, 0, 0, 0);

这句代码必须放在 window.onload 里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。

iOS 中如何获取滚动条的值

桌面浏览器中想要获取滚动条的值是通过 document.scrollTop 和 document.scrollLeft 得到的，但在 iOS 中你会发现这两个属性是未定义的，为什么呢？因为在 iOS 中没有滚动条的概念，在 Android 中通过这两个属性可以正常获取到滚动条的值，那么在 iOS 中我们该如何获取滚动条的值呢？通过 window.scrollY 和 window.scrollX 我们可以得到当前窗口的 y 轴和 x 轴滚动条的值。
---------------------
原文：https://blog.csdn.net/zhangxin09/article/details/8750586