页面禁止缩放：
<meta name="viewport" content=">
关于禁止横屏：
关于在移动端使用普通的click事件延迟300ms的问题：
1. 将click事件转变成touchstart/touchend事件(手指按下即会触发)
;(function(){
var isTouch = (‘ontouchend‘ in document.documentElement) ? ‘touchend‘ : ‘click‘;
if(!$.fn.quickOn){
$.fn.quickOn= function(){
arguments[0] = (arguments[0] === ‘click‘) ? isTouch: arguments[0];
return $.fn.on.apply(this, arguments);
};
}
})();
或者改写on方法
;(function(){
var isTouch = (‘ontouchstart‘ in document.documentElement) ? ‘touchstart‘ : ‘click‘, _on = $.fn.on;
$.fn.on = function(){
arguments[0] = (arguments[0] === ‘click‘) ? isTouch: arguments[0];
return _on.apply(this, arguments);
};
})();
2. 利用fastClick
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
关于移除移动端长按出现选择文字：
在对应div的css下添加
-webkit-user-select: none;
-moz-user-select: none;
目前iphone有效，安卓暂未测试
关于使用iScroll出现的一些问题：
1. 典型的不出现效果问题
iScroll需要你的dom结构满足一些要求才能滑动
<div id="content">
<div id="list">
div>
div>
这个时候通过
var myscroll = new iScroll(‘content‘,{hScroll: false, vScroll:true, checkDOMChanges: true});
即可实现上下滑动效果(这里你如果将content换成list估计就无法实现了，所以就是说当你创建对象发现没有效果的时候，最简单的就是在外面再套一个div)
2. 典型的在手机上一个长的列表无法像正常的滚动条那样显示的问题
首先，确保你添加了 vScroll:true, checkDOMChanges: true
然后确保你的div设置了固定高度。
3.内容最下面一点无法拉上去的问题
如果是这个问题，那应该是你的 list（上面例子的id）设置了margin之类的，首先这个插件滚动展示的原理：从list的顶端开始，高度为content的高度，所以当你设置了margin，那么list开始的地方就会变成content的下面XXpx的，那么结束的地方也不会是content的底部，所以会出现问题。
当然也还有可能是别的原因！
3.关于移动端一些meta标签的问题
<meta content=" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephOne=no" name="format-detection" />
- 第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
- 第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
- 第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
- 第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码；
4. 关于使用tap出现点击穿透的问题
可使用fastclick解决
5. 文字两端对齐
效果：
2. 下面这种只能在高版本pc端生效
text-align:justify;
-webkit-text-align-last:justify;
text-align-last:justify;
3. 创建伪对象来使两端对齐
.justify {
text-align:justify;
width:80px;
}
.justify label {display:inline-block;width:100%;}
.justify label:after {
display:inline-block;
overflow:hidden;
width:100%;
height:0;
content:‘‘;
}
<div class="justify">
<label>用户名label>
<label>密码label>
div>
6. 内容溢出显示 …
text-overflow： 取值 clip（裁剪） ellipsis （将溢出部分替换为…）
此属性不可单独使用，需配合 white-space和overflow属性
overflow: hidden;
white-space: nowrap;
text=overflow: ellipsis;
以上是单行溢出处理
下面是多行溢出处理
width:200px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; /* 此为最老盒模型版本，建议换成flex */
-webkit-box-orient: vertical;/* 盒模型子元素排列方式 */
-webkit-line-clamp: 2; /* 这是强制块级元素显示2行 */
微信开发的一些问题
京公网安备 11010802041100号