微信开发的一些问题

页面禁止缩放：

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1">

关于禁止横屏：

关于在移动端使用普通的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="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" 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行 */