mcake活动维护常见问题记录【wap端】 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★
★ ★ ★ ★ ★ ★ ★ ★ ★ ★ wap端问题及解决方法 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★
一、wap端弹窗
.Dialogbg-Select{ background-color: #000; height: 100%; left: 0; opacity: 0.85; position: fixed; top: 0; width: 100%; z-index: 200; display: none; }
.Dialog-Select{ background: #fff none repeat scroll 0 0; box-shadow: 0 0 0 #999; font-size:px2rem(14); width:px2rem(600); height:px2rem(660); margin-top: px2rem(-330); margin-left: px2rem(-300); left: 50%; padding: 0; position: fixed; top: 50%; z-index: 99999; display: none; border-radius:px2rem(20); }
<div class="Dialogbg-Select" ontouchmove="return false;"></div> /*禁止弹窗滑动滚动*/ <div class="Dialog-Select" ontouchmove="return false;"> <div class="s-closes"></div> <div class="Select" ontouchmove="return false;"> <p></p> </div> </div>
==================================================================
二、wap端兼容小屏的做法
@media screen and (max-width: 320px) { .sel-li{ top: px2rem(-10) !important; } i{top:px2rem(3) !important; } }
================================================================
三、px转rem。
1.通过sass自动编译
<script src="http://edm.mcake.com/weifengwang/common/flexible.js"></script>
@function px2rem($n) { @return ($n * 10 / 750) * 1rem; }
=================================================================
2.手动转rem 实际像素 * 10 / 750 = 需要的rem
也可以简单理解为:实际像素/75 = 需要的rem
比如:300px-->4rem
50px-->.666rem
3.js函数方式
/*px转成rem的方法*/ function px2rem(d) { var val = parseFloat(d) * 10 / 750; if (typeof d === 'string' && d.match(/px$/)) { val += 'rem'; } return val; } window.px2rem = px2rem;
=================================================================
四、wap端头部meta常用设置
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
=================================================================
五、判断横屏和竖屏
/*移动端通用 *判断手机横竖屏状态 * 翻转屏幕自动刷新页面 */ function hengshuping() { if (window.orientation == 180 || window.orientation == 0) { window.location.reload();/*竖屏状态*/ } if (window.orientation == 90 || window.orientation == -90) { window.location.reload(); /*横屏状态*/ } } window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
=================================================================
六、动画制作 参考“manyuemei”项目
第一步:切图png,把每一帧都切出来
第二步:使用TextureMerger序列帧动画,【导出】序列帧合成的图片和对应的json,并生成mym-a.json
第三步:使用ResDepot,生成资源配置res.json (把png生成在配置里面,json不可以生成在里面)
<div class="q1"> <canvas width="240" height="241" id="mym-a"></canvas></div>
.q1{ top:px2rem(311); left:auto; right: px2rem(10); canvas { width:px2rem(179); height: px2rem(165); } }
var animates = { mymA:function () { //图片配置 var mcConfig = { "mym-a-1":{"x":420,"y":975,"w":208,"h":193,"offX":11,"offY":23,"sourceW":240,"sourceH":241}, "mym-a-2":{"x":210,"y":975,"w":208,"h":193,"offX":11,"offY":24,"sourceW":240,"sourceH":241}, "mym-a-3":{"x":0,"y":975,"w":208,"h":193,"offX":11,"offY":24,"sourceW":240,"sourceH":241}, "mym-a-4":{"x":1680,"y":780,"w":208,"h":193,"offX":11,"offY":25,"sourceW":240,"sourceH":241} }; // MovieClip 可以通过duration控制两张图片轮播的速度。duration:0.2*10=2 new MovieClip('mym-a', loader.get('mym-a_png').data,formatResData(mcConfig)).play(); } }animates.mymA();
==================================================================
七、微信打开网页键盘弹起后页面会被顶上去,键盘收起,页面没有回到原来的位置
解决方案:在点击按钮那里或者是input失去焦点时加下面其中一个即可解决。 通过scrollTop滚动来解决。
scrollTop ,有bug,如果连续点击input切换的话,会出现滚动的位置错乱
$("input").blur(function () { $("html,body").animate({scrollTop: document.documentElement.clientHeight},500); });
或者是scrollTo ,有bug
//滚动到顶部 window.scrollTo(0, 0); //滚动到底部 window.scrollTo(0, document.documentElement.clientHeight);
完美解决方案: 无bug(根据当前滚动条的位置来计算,失去焦点后,重新让滚动条滚动到之前的位置,太完美了)
$("input").blur(function () { setTimeout(function() { var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight - 1, 0)); }, 100); });
测试连接:https://img.zai-art.com/web/app/demo/weixin.html
相关文章:微信打开网页键盘弹起后页面会被顶上去,键盘收起,页面无法回到原来的位置,导致弹框里的按钮响应区域错位 position为fixed
==================================================================
八、手机端公告无缝滚动,纯css3实现
<div class="moveBox"> <div class="move"> <div class="item">温馨提示:2019年2月4日当天最晚配送时间为下午18:00,给您带来不便,还望见谅!</div> <div class="item">温馨提示:2019年2月4日当天最晚配送时间为下午18:00,给您带来不便,还望见谅!</div> </div> </div>
/*公告无缝滚动*/ .moveBox{position: relative; width:100%; margin: 0 auto px2rem(50); overflow: hidden; white-space:nowrap; } .move{; left:100%; white-space:nowrap; animation:moveAni 15s infinite linear normal; } .item{float: left; width:px2rem(800); font-size: px2rem(20);} @keyframes moveAni{ 0%{left:;} 100%{left: px2rem(-800); } /*这里的滚动距离要和item的宽度保持一致,才可以实现无缝滚动*/ }
mcake活动维护常见问题记录【wap端】 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★的更多相关文章
- mcake活动维护常见问题记录【pc端】 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★
★ ★ ★ ★ ★ ★ ★ ★ ★ ★pc端问题及解决方法 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ 问题一.pc.弹窗,背景兼容ie8的写法 ;;; -moz-opacity:.7;f ...
- mcake活动维护,检查 ★ ★
一.检查火狐浏览器.chrome浏览器.ie8.9.10.11是否显示正常 二.对比设计稿 三.动画添加 四.检查图片是否失真 五.ie8空按钮无法点击 六.官网banner制作
- UWP学习记录1-开端
UWP学习记录1-开端 1.背景 针对不同基础的人,学习的路线自然是不同的.这篇文章记录的是我个人的学习路线,或者说笔记.我对自己的技术状态的定义是: A.有很好的windows平台编程基础: B.有 ...
- 也来谈谈wap端瀑布流布局
Definition 瀑布流布局,在视觉上表现为参差不齐的多栏布局,随着页面滚动条向下滚动,新数据不断被加载进来. 瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内 ...
- JS判断是wap端访问网站还是PC端访问,然后进行自动跳转的代码
<script type="text/javascript"> function goPAGE() { if ((navigator.userAgent.match(/ ...
- WAP端 经验记录2
1. LightboxV2 插件 点击A 应该关闭弹层的效果,但是 SAMSUNG 手机上原生浏览器上,看上去不会关闭却跳转了,但当点击回退按钮的时候就会看见弹层已经消失(其实之前的关闭效果已经记录了 ...
- WAP端 经验记录1
1. 点击元素触发事件的先后顺序:touchstart, touchend, mousedown, mouseup, click 2. Animate 的 stop 问题问题:手机端由于用 CSS3 ...
- WAP端 touch事件触发顺序记录
IOS7.0 safari 滚动滚动条的时候, 最后手指放开 (scroll 总是在 touchend后面,所以要用 setTimeout) touchstart touchmove(多个) touc ...
- MVC扩展Filter,通过继承HandleErrorAttribute,使用log4net或ELMAH组件记录服务端500错误、HttpException、Ajax异常等
□ 接口 public interface IExceptionFilter{ void OnException(ExceptionContext filterContext);} Except ...
随机推荐
- python安装virtualenv
pip install virtualenv 为了使用更方便用,安装另外一个,windows下要-win,linux下不用 pip install virtualenvwrapper-win 使用方法 ...
- .net截取字符串
string s=abcdeabcdeabcdestring[] sArray1=s.Split(new char[3]{c,d,e}) ;foreach(string i in sArray1)Co ...
- C#:当前时间转换成文件名
DateTime.Now.ToFileTime().ToString(); 结果是一个字符串,类似:131238643554094913.
- PAT 天梯赛 L1-047. 装睡 【水】
题目链接 https://www.patest.cn/contests/gplt/L1-047 AC代码 #include <iostream> #include <cstdio&g ...
- Set,List,Map的区别
最近在学习struct2中OGNL表达式的过程中,发现自己对set,list,map存在只是欠缺,在百度的过程中发现了此文觉得讲的不错,放到自己博客以便再次查阅,也希望更多地菜鸟看到. java集合的 ...
- Spark机器学习2·准备数据(pyspark)
准备环境 anaconda nano ~/.zshrc export PATH=$PATH:/anaconda/bin source ~/.zshrc echo $HOME echo $PATH ip ...
- 关于comparable接口
参考博客: https://blog.csdn.net/nvd11/article/details/27393445 第一个例子 @Test public void fun1(){ List list ...
- length与size()
List li = new ArrayList(20);System.out.println(li.size()) ;// 0 int [] arr = new int [20];System.ou ...
- CentOS限制SSH登录地址
编辑hosts.allow文件,将允许连接的地址写进去 [root@Elements ~]# vim /etc/hosts.allow sshd:10.10.10.1:allow sshd:172.1 ...
- jQuery的序列化元素 serialize()方法 serializeArray()方法 param()方法
当提交的表单元素较多时用serialize()方法,serialize()方法也是作用于一个jQuery的对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. serialize() 方法通 ...