Mobile Terminal

在移动端应避免使用100vh

CSS 中的视口单位(vh)听起来很棒。 如果要设置元素的样式以占据整个屏幕的高度,则可以设置 height: 100vh,就可以拥有一个完美的全屏元素,该元素会随着视口的变化而调整大小!但是 100vh 在移动浏览器中以微妙但基本的方式被破坏,这使其几乎无用。 最好避免 100vh,而是依靠 javascript 设置高度以获得完整的视口体验,或者在特殊情况下可以使用 100%。 问题描述 在手 […]

从 font-size 探索移动应用的前端开发

2016-12-14 在 Dynamsoft 公司月度例会上所做分享的部分内容 目录: 讲 font-size 的原因 拉勾网 – 简单问题简单解决 网易 – 内容丰富、排版相对固定 淘宝 – 内容丰富、改动相对频繁 比较网易与淘宝的做法 前端开发如何与设计协作 讲 font-size 的原因 自公司网站首页改版之后我在慢慢的将一些老页面改成响应式,改版过程中我 […]

网页如何适配 iPhoneX

iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素)。 在网上搜集了些资料,结合自己的一些项目经验,总结一下 iPhone X 的适配。 目录 需要了解的几个新知识 适配 iPhoneX […]

通过Mac远程调试iPhone/iPad上的网页

我们知道在 Mac/PC 上的浏览器都有 Web 检查器这类的工具(如最著名的 Firebug)对前端开发进行调试,而在 iPhone/iPad 由于限于屏幕的大小和触摸屏的使用习惯,直接对网页调试非常不方便,所以一直没有 Web 检查器这一类工具。 但是 iOS 6 的发布解决了这个问题。 iOS 6 给 Safari 带来了远程的 Web 检查器工具(Remote Web Inspector) […]

$(document).click 在iPhone/iPad上失效

$(document).click是一个点击页面文档就会触发的事件,但近期在开发移动端页面的menu时候碰到一个问题: $(document).click在iPhone/iPad上点击menu的时候没有触发下拉事件…… 最后发现$(document).click(function(){…})在苹果设备上只有点击document里的图片img才能执行functio […]

移动端适配知识总结&专有名词解释

写过移动端适配或是做过响应式开发的小伙伴对下面这段代码一定不会陌生: 我们知道,加了上面这段代码之后,在移动设备上的页面宽度就会和设备宽度一致了,但你知道原理是什么吗?我之前在公司例会和部门例会上做过分享,其中就介绍过这个原理,但说实话当中涉及的一些专有名词和知识,如果不温习的话一时间还真的很难区分;下面我将从自己的理解和之前的培训内容出发,结合网上看到各位大神的理解,梳理一下移动端适配的一些知识 […]

如何去除移动设备上按钮、图片、文本框等出现的阴影

在手机等移动设备上点击 <input/> <button/> 等按钮、文本框,或者点击图片时,有的时候会出现一个半透明的灰色圆角背景;一开始以为是 outline 的问题,但是设置 outline 为 none 之后灰色圆角背景还在; 后来才发现那个灰色圆角背景是 tap 后的高亮背景,要消除这个灰色背景,则需要将属性 -webkit-tap-highlight-color 的值设置为 […]

移动 web 页面使用字体的思考

还记得第一次接触手机端项目的时候,接到 PSD 稿后,发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计,于是我写页面的时候也定义 font-family 为微软雅黑,但后来上线了在手机上打开的时候发现并不是微软雅黑字体;开始还以为是我的设置有问题,问了 google 之后才知道手机系统 ios、android 等是不支持微软雅黑字体。 那么为了满足产品的需要,保证视觉稿的还原度,手机端是如何定义 […]

移动端开发的一些注意事项

前端开发工程师多少都会接触到移动端开发这块,就算没接触过移动端的 App 等应用的开发,但是手机端网页、微信页面甚至响应式开发肯定都有接触过其中的某种或多种;在开发这些运行在移动设备上的应用或页面时有一些共同的事项需要我们注意。 一、设计师应该注意的地方 移动端最大的问题在于多种设备,多种平台,多种尺寸,当我们在做手机端 H5 网页设计稿时(当然包含微信端的 H5 网页设计),如果没有做过类似的移 […]

bootstrap tooltip 不显示的解决方法

Bootstrap 提示工具(Tooltip)插件 这个提示工具的插件功能很全,几乎涵盖了我们用到提示工具的所有场景。 用法(官网介绍): 提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面。 有以下两种方式添加提示工具(tooltip): 方法一、通过 data 属性:如需添加一个提示工具(tooltip),只需向一个锚标签添加 […]