移动端页面常见问题_II
var srcList = [];
$.each($('img'),function(i,item){
if(item.src) {
srcList.push(item.src);
$(item).click(function(e){
// 通过这个API就能直接调起微信客户端的图片播放组件了
Api.imagePreview(this.src,srcList);
});
}
});
});document.addEventListener('touchmove',function(event){event.preventDefault();},false);
input, textarea {
-webkit-user-select: text;
-moz-user-select: -moz-text;
-moz-user-select: text;
}
filter兼容
filter:blur(3px);-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);filter:url(blur.svg#blur);filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
手机端禁用 position:fixed
超出部分.... ： overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
a
{
tap-highlight-color: rgba(0,0,0,0);
focus-ring-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-focus-ring-color: rgba(0, 0, 0, 0);
-moz-tap-highlight-color: rgba(0,0,0,0);
-moz-focus-ring-color: rgba(0, 0, 0, 0);
}
滚动条样式
::-webkit-scrollbar { width: 5px;height: 14px; }
::-webkit-scrollbar-track,::-webkit-scrollbar-thumb { border-radius: 999px; border: 5px solid transparent;}
::-webkit-scrollbar-track { box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset; }
::-webkit-scrollbar-thumb {min-height: 20px; background-clip: content-box; box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset; }
::-webkit-scrollbar-corner {background: transparent;}
控制显示区域各种属性：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
width - viewport的宽度
- height – viewport的高度
- initial-scale - 初始的缩放比例
- minimum-scale - 允许用户缩放到的最小比例
- maximum-scale – 允许用户缩放到的最大比例
- user-scalable – 用户是否可以手动缩放
IOS中Safari允许全屏浏览：
<meta content="yes" name="apple-mobile-web-app-capable">
IOS中Safari顶端状态条样式：
<meta content="black" name="apple-mobile-web-app-status-bar-style">
忽略将数字变为电话号码：
<meta content="telephone=no" name="format-detection">
一般情况下，IOS和Android系统都会默认某长度内的数字为电话号码，即使不加也是会默认显示为电话的，so，取消这个很有必要！
IOS中Safari设置保存到桌面图标：
这是IOS中Safari特有的meta，是在你保存某个页面到桌面的时候使用这张图作为桌面图标，so，尺寸和iphone上的一致，是57*57px
<link rel="apple-touch-icon" href="custom_icon.png">
// 手势事件touchstart //当手指接触屏幕时触发touchmove //当已经接触屏幕的手指开始移动后触发touchend //当手指离开屏幕时触发touchcancel// 触摸事件gesturestart //当两个手指接触屏幕时触发gesturechange //当两个手指接触屏幕后开始移动时触发gestureend// 屏幕旋转事件 onorientationchange // 检测触摸屏幕的手指何时改变方向 orientationchange // 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 |
4. 屏幕旋转事件：onorientationchange
添加屏幕旋转事件侦听，可随时发现屏幕旋转状态（左旋、右旋还是没旋）。例子：
/*/*/*/*/*/**/*/*/*/*/*/*/*
<style>
.hp{
/* Rotate div */
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* Internet Explorer */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg); /* Opera */
}
</style>
<body id="mrt">
asdfasdf
<script>
//判断手机横竖屏状态：
function hengshuping(){
if(window.orientation==180||window.orientation==0){
alert("竖屏状态！") ;
$("#mrt").removeClass("hp");
}
if(window.orientation==90||window.orientation==-90){
alert("横屏状态！") ;
$("#mrt").addClass("hp");
}
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
/*************
transform: rotate(45deg);
transform-origin:20% 40%; 旋转中心点
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */ 旋转中心点
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */ 旋转中心点
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */ 旋转中心点
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */ 旋转中心点
*////////////////////////
//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。
</script>
/*/*/*/*/*/**/*/*/*/*/*/*/*
5. 隐藏地址栏 & 处理事件的时候，防止滚动条出现：
// 隐藏地址栏 & 处理事件的时候 ，防止滚动条出现addEventListener('load', function(){ setTimeout(function(){ window.scrollTo(0, 1); }, 100); }); |
/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*
/*! Normalized address bar hiding for iOS & Android (c) @scottjehl MIT License */
(function( win ){
var doc = win.document;
// If there's a hash, or addEventListener is undefined, stop here
if(!win.navigator.standalone && !location.hash && win.addEventListener ){
//scroll to 1
win.scrollTo( 0, 1 );
var scrollTop = 1,
getScrollTop = function(){
return win.pageYOffset || doc.compatMode === "CSS1Compat" && doc.documentElement.scrollTop || doc.body.scrollTop || 0;
},
//reset to 0 on bodyready, if needed
bodycheck = setInterval(function(){
if( doc.body ){
clearInterval( bodycheck );
scrollTop = getScrollTop();
win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
}
}, 15 );
win.addEventListener( "load", function(){
setTimeout(function(){
//at load, if user hasn't scrolled more than 20 or so...
if( getScrollTop() < 20 ){
//reset to hide addr bar at onload
win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
}
}, 0);
}, false );
}
})( this );
/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*
6. 双手指滑动事件：
// 双手指滑动事件addEventListener('load', function(){ window.onmousewheel = twoFingerScroll;}, false // 兼容各浏览器，表示在冒泡阶段调用事件处理程序 (true 捕获阶段)); function twoFingerScroll(ev) { var delta =ev.wheelDelta/120; //对 delta 值进行判断(比如正负) ，而后执行相应操作 return true; }; |
7. 判断是否为iPhone：
// 判断是否为 iPhone ： function isAppleMobile() { return (navigator.platform.indexOf('iPad') != -1); }; |
8. localStorage:
例子 ：（注意数据名称 n 要用引号引起来）
var v = localStorage.getItem('n') ? localStorage.getItem('n') : ""; // 如果名称是 n 的数据存在 ，则将其读出 ，赋予变量 v 。 localStorage.setItem('n', v); // 写入名称为 n、值为 v 的数据 localStorage.removeItem('n'); // 删除名称为 n 的数据 |
9. 使用特殊链接：
如果你关闭自动识别后 ，又希望某些电话号码能够链接到 iPhone 的拨号功能 ，那么可以通过这样来声明电话链接 ,
<a href="tel:12345654321">打电话给我</a><a href="sms:12345654321">发短信</a>或用于单元格：<td onclick="location.href='tel:122'"> |
10. 自动大写与自动修正
要关闭这两项功能，可以通过autocapitalize 与autocorrect 这两个选项：
<input type="text" autocapitalize="off" autocorrect="off" />
|
隐藏微信中网页右上角按钮
公众号在有需要时（如不需要用户分享某个页面），可在网页中通过JavaScript代码隐藏网页右上角按钮。
接口调用代码（JavaScript）
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
WeixinJSBridge.call('hideOptionMenu');
});
返回说明
隐藏底部导航栏没有返回值。（需要显示请把hideOptionMenu换成showOptionMenu）
隐藏微信中网页底部导航栏
公众号在有需要时（如认为用户在该页面不会用到浏览器前进后退功能），可在网页中通过JavaScript代码隐藏网页底部导航栏。
接口调用代码（JavaScript）
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
WeixinJSBridge.call('hideToolbar');
});
返回说明
隐藏底部导航栏没有返回值。（需要显示顶部导航栏，请把hideToolbar换成showToolbar）
网页获取用户网络状态
为了方便开发者根据用户的网络状态来提供不同质量的服务，公众号可以在公众号内部的网页中使用JavaScript代码调用来获取网络状态。
接口调用代码（JavaScript）
WeixinJSBridge.invoke('getNetworkType',{},
function(e){
WeixinJSBridge.log(e.err_msg);
});
