-webkit-box 的用法 通常,在移动端要实现水平方向平分宽度的布局,会使用 -webkit-box 来布局.它的使用方法是: <div class='parent'> <div class='child'></div> <div class='child'></div> <div class='child'></div> </div> .parent { display: -webkit-box; }…

再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的 通常解决方法是给一个交互事件,一定要是交互事件 标签:<audio loop src="/photo/aa.mp3" id="audio" autoplay preload="auto">该浏览器不支持audio属性</audio> 里面的属性我就不多做解释了,可以自己百度 解决方法: //-…

问题:在微信端(安卓浏览器也如此)打开的H5登录页面中,点击输入信息,弹出软键盘会挤压背景图片. 本来的body宽高设置body{width:100%,height:100%},不起作用,这样写就会导致键盘弹出的时候html和body的高度从原来的100%变为(100%-键盘高度).所以要再强行把高度调整回去. 未调整前:背景被挤压,导致下部出现空白背景 调整后: 插入js代码调整高度 $(document).ready(function () { $('body').css({'height'…

1. 移动页面开发基础 1.1 像素——什么是像素 像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,Web 前端开发领域,像素有以下两层含义: (1) 设备像素:设备屏幕的物理像素,对于任何设备来讲物理像素的数量是固定的. (2) CSS像素:这是一个抽象的概念,它是为 Web 开发者创建的. 如下图,是在缩放比例为1,即 scale = 1 的情况下,设备像素和CSS像素示意图: 我们再来考虑这样…

最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了. 1.ios端兼容input光标高度 问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 当点击输入的时候,光标的高度和父盒子的高度一样.例如下图,左图是正常所期待的输入框光标,右边是ios的input光标. 出现原因分析:通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离(行高),当点击输入的时…

随着该项目的发布到线上(小打小闹),即将又要开启另一段崭新的旅程.强迫自己停下来写写所学所得,个人认为总结和分享是一种很棒的学习方式.那让我们先来瞧瞧项目长的什么样.如果着急要源码的朋友,可以下拉到最后~~ 微信端部分展现                从微信端进入网页端的效果(这部分还需要优化(*^__^*))         但是这图是真的还是假的啊,特效蛮酷炫的,不会是被楼主P上去的吧?(第4副图中间那个女孩确实是云云的女同学)嘿嘿,用微信扫这个二维码(是骡子是马拿出来溜溜~~),不过测试…

<script> var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.screen.height); var phoneScale = phoneWidth/750; //除以的值按手机的物理分辨率 var ua = navigator.userAgent; if (/Android (\d+\.\d+)/.test(ua)) { var version = parseFloat(R…

前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩了一下,很强大.这篇文章只是做一个记录,方便自己以后使用的时候看看,不对的地方请大家批评指正.放入官方的微信web开发者工具下载链接以及文档说明https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html,参考这个文档,我又给细节化了一些内容.下载以后直接安装就好. 1.下…

1.pc端页面在移动端显示,默认视口宽度是980px(也就是body宽度是980px),可通过meta标签设置为需要的尺寸,比如页面中元素最大宽度是1220px,则如下所示 <meta name="viewport" content="width=1220"> 2.如果不想让页面有水平滚动条又有元素需要固定在屏幕底部,则可以按以下方法操作 1)给html页面设置视口宽度 2)判断是否为移动设备,对pc和移动设备分别设置样式,如下: $(function(…

leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第一个微信相关项目开发,为什么这个才叫第一个?上一个完全没有用到任何微信相关接口,一个动画宣传页加一个表单,这次这个名曰"微信H5页面"却感觉不是那么简单.只是之前自己写着玩,关注过微信的相关接口,也就是5分钟热度,到现在那个公众号还是只是会简单的翻译(用的百度翻译接口,完全没有涉及到微信接…