首页 > 代码库 > 微信开发的一些问题

微信开发的一些问题

2024-09-02 07:18:11   226人阅读

页面禁止缩放：

<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行 */

 

微信开发的一些问题


联系
我们