移动端微信页面的一些自己爬的坑

最近公司又接了一个项目,我负责微信端页面的开发,想说一下这两天遇到的坑,其实以前也遇到过,只是当时没想着把它记下来,所以导致这次写页面浪费了我好长时间,所以今天准备把它下来,以防后患。

  首先就是背景的问题,我看了设计图是上面白色的背景,下面灰色的背景,刚开始我觉得应该给它设置高度,写出来之后完全不像样,瞬间懵逼,这写的狗屎一样的代码,后来才明白它应该是以灰色为背景,上面的div加白色背景就可以了,这么简单我想了好半天,感觉自己从学校回来就没救了,还有就是给上面的div加padding,这个也是遇到的问题。

  然后就是页面样式的问题了,因为用的是rem来设置宽、高和字体大小,刚开始用了js来设置不同屏幕下的html根字体的大小,后来觉得用的不顺手还是用了以前用的css来设置媒体查询,rem真的好用,谁用谁知道。用js来设置html的font-size字体大小,代码如下:

(function(){
      var html = document.documentElement;
      hwidth = html.getBoundingClientRect().width;
      html.style.fontSize = hwidth/15 + "px";
})()

先就记录这些把,以后有坑再填!!!

时间: 2024-10-09 20:58:45

移动端微信页面的一些自己爬的坑的相关文章

移动端微信页面兼容性问题集合

刚刚才把博客搬到这里来,记录一下完成2个微信公众号项目的经验吧 1.做移动端的项目页面必须用html5的标签和知识,不然有些坑就不好解决了. 2.H5页面窗口自动调整到设备宽度,并禁止用户缩放页面(强制让文档的宽度与设备宽度保持1:1,最大宽度1.0,禁止屏幕缩放.) <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale

微信页面开发 第三次总结

暂停微信页面开发,先处理yxt安卓司机版本. 司机端需求: 登入功能(由管理员分配账户),导航地图(提供搜索功能,寻找地点,快速导航) 接单控制=>是否接单,是否自动接单,接单类型 接单:当乘客抢到单后,司机有120秒时间可以抢单.参与抢单的司机会显示订单被抢,显示被谁抢.自己抢到,则显示去接乘客,或者呼叫乘客,去接乘客则显示路线导航,呼叫乘客则拨打乘客电话, 在接乘客时候显示距离和电话按钮,(乘客端可显示司机距离),司机点击接到乘客,订单状态变为服务中,同时,乘客端收到服务开始的消息. 服务过

PC 端微信扫码注册和登录

一.前言 先声明一下,本文所注重点为实现思路,代码及数据库设计主要为了展现思路,如果对代码效率有着苛刻要求的项目切勿照搬. 相信做过微信开发的人授权这块都没少做过,但是一般来说我们更多的是为移动端的网站做授权,确切来说是在微信端下做的一个授权.今天遇到的一个问题是,项目支持微信端以及 PC 端,并且开放注册.要求做到无论在 PC 端注册或者是在微信端注册之后都可以在另外一个端进行登录.也就是说无论 PC 或是微信必须做到"你就是你"(通过某种方式关联). 二.寻找解决方案 按传统的方式

移动端h5页面的设计稿尺寸

当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最值得学习的10个H5案例(各种经典,推荐收藏) 这可能是近半年做得最好的4个H5传播案例 还没搞懂H5营销?他们已经开始在玩“虚拟现实”了! 一个插线板的H5怎么就火了?大家明明是去看周鸿祎的八卦的 那么多手机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是

移动端html页面分享

开发APP应用比开发移动端网页挑战小,因为APP应用只需要适配不同手机即可,而移动端网页不仅需要适配不同手机,还要适配同一部手机的不同浏览器. 移动端页面分享是一个常用的功能,需要宿主环境,可以是某APP应用,也可以是微信,还可以是浏览器. 如果html页面内嵌APP应用或者微信,想实现分享功能,需要在按钮元素上加代码,要么调用APP方法或协议,要么调用微信API:如果html页面直接在浏览器打开,网页前端不用额外做分享功能,因为浏览器自带分享. 站在网页前端的角度,下面具体介绍一下微信分享和A

移动端登录页面input获取焦点后页面布局及输入框上移的问题

最近切微信页面的时候,发现移动端的登录页面,带输入框的那种,如图: 从页面本身来看没有什么问题,上传至测试服务器,用iphone访问也没有什么问题,但是当同事用Android手机获取焦点后,问题来了, 软键盘调出后,输入框整体都被挤到了页面上方,内容覆盖了logo,页面瞬间low毙. 然后各种改,把上移的那部分固定定位.js各种控制高度,然鹅都没有很好的起作用.经过各种度娘和尝试,终于恢复正常 终于是整个页面背景上移,而不仅仅是内容上移了.贴代码,重点都在标记部分 问题解决,so easy,希望

移动端H5页面的设计稿尺寸大小规范

当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 那么多手机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为content=”width=device-width”的情况下) 也就是我们的H5页面前端代码里面必须包含 <meta

移动端H5页面高清多屏适配方案

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:

手机访问php环境移动端静态页面

痛点 在做一个移动端H5页面,手机要调试访问,不方便.就想说能不能手机连接电脑的php项目,进行调试修改. 需要 手机要跟电脑同处在同个局域网中,公司的话一般是局域网,实在没有的话花个20块买个随身WIFI.我自己就是买的360WIFI 安装PHP集成环境 php菜鸟一个,所有我这边安装的是phpStudy,安装包直接下一步操作就可以了.注意WWW的位置. 安装成功之后 设置站点域名设置(记得保存) 查看apache,httpd.conf配置(看是否限制了访问) 主要是看这两条有没有被限制, +