这些移动端WEB开发的常见问题你知道几个-WEB前端

这些移动端WEB开发的常见问题你知道几个-WEB前端知识

、移动端如何定义字体font-family

三大手机系统的字体：

ios 系统

默认中文字体是Heiti SC

默认英文字体是Helvetica

默认数字字体是HelveticaNeue

无微软雅黑字体

android 系统

默认中文字体是Droidsansfallback

默认英文和数字字体是Droid Sans

无微软雅黑字体

winphone 系统

默认中文字体是Dengxian(方正等线体)

默认英文和数字字体是Segoe

无微软雅黑字体

各个手机系统有自己的默认字体，且都不支持微软雅黑

如无特殊需求，手机端无需定义中文字体，使用系统默认

英文字体和数字字体可使用 Helvetica ，三种系统都支持

* 移动端定义字体的代码 */

body{font-family:Helvetica;}

2、移动端字体单位font-size选择px还是rem

对于只需要适配手机设备，使用px即可

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备

rem配置参考：

3、什么是Retina 显示屏，带来了什么问题

retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个

在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍

那么，前端的应对方案是：

设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2

//例如图片宽高为：200px*200px，那么写法如下

.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px

.css{font-size:20px}

4、viewport模板

5. 优先使用最新版本 IE 和Chrome

6. 添加到主屏后的标题（IOS）

7. 启用 WebApp 全屏模式（IOS）

当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果）

8. 百度禁止转码

通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，非常之恶心。不过我们可以通过这个meta标签来禁止它：

10. 设置状态栏的背景颜色（IOS）

设置状态栏的背景颜色，只有在 "apple-mobile-web-app-capable"content="yes" 时生效

<metaname="apple-mobile-web-app-status-bar-style"content="black-translucent" />

content 参数：

default ：状态栏背景是白色。

black ：状态栏背景是黑色。

black-translucent：状态栏背景是半透明。如果设置为default 或 black ,网页内容从状态栏底部开始。如果设置为black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

11. 移动端手机号码识别（IOS）

在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：

7位数字，形如：1234567

带括号及加号的数字，形如：(+86)123456789

双连接线的数字，形如：00-00-00111

11位数字，形如：13800138000

可能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自动识别：

开启电话功能

开启短信功能：

12. 移动端邮箱识别（Android）

与电话号码的识别一样，在安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下的meta来管别邮箱的自动识别：

同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

13、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩

a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0)}

14、部分android系统中元素被点击时产生的边框怎么去掉

android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果

a,button,input,textarea{

-webkit-tap-highlight-color: rgba(0,0,0,0)

-webkit-user-modify:read-write-plaintext-only;

}

-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符

另外，有些机型去除不了，如小米2

对于按钮类还有个办法，不使用a或者input标签，直接用div标签

15、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉

16、webkit表单元素的默认外观怎么重置

.css{-webkit-appearance:none;}

17、webkit表单输入框placeholder的颜色值能改变么

input::-webkit-input-placeholder{color:#AAAAAA;}

input:focus::-webkit-input-placeholder{color:#EEEEEE;}

18、webkit表单输入框placeholder的文字能换行么

ios可以，android不行~

19. 关闭iOS键盘首字母自动大写

在iOS中，默认情况下键盘是开启首字母大写的功能的，如果启用这个功能，可以这样：

20. 关闭iOS输入自动修正

和英文输入默认自动首字母大写那样，IOS还做了一个功能，默认输入法会开启自动修正输入内容，这样的话，用户经常要操作两次。如果不希望开启此功能，我们可以通过input标签属性来关闭掉：

21. 禁止文本缩放

当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：

html {

　　 -webkit-text-size-adjust: 100%;

}

需要注意的是，PC端的该属性已经被移除，该属性在移动端要生效，必须设置 `meta viewport’。

22. 移动端如何清除输入框内阴影

在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：

23.屏幕旋转的事件和样式

window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；

24.audio元素和video元素在ios和andriod中无法自动播放

应对方案：触屏即播

$('html').one('touchstart',function(){

audio.play()

})

25.摇一摇功能

HTML5deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

26.手机拍照和上传图片

使用总结：

ios 有拍照、录像、选取本地图片功能

部分android只有选取本地图片功能

winphone不支持

input控件默认外观丑陋

27. 消除transition闪屏

.css{

-webkit-transform-style: preserve-3d;

-webkit-backface-visibility: hidden;

}

开启硬件加速

解决页面闪白

保证动画流畅

设计高性能CSS3动画的几个要素

尽可能地使用合成属性transform和opacity来设计CSS3动画，

不使用position的left和top来定位

利用translate3D开启GPU加速

28.android 上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}

29.模拟按钮hover效果

移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活css的active效果，代码如下，

框架

1. 移动端基础框架

zepto.js 语法与jquery几乎一样，会jquery基本会zepto~

iscroll.js 解决页面不支持弹性滚动，不支持fixed引起的问题~ 实现下拉刷新，滑屏，缩放等功能~

underscore.js 该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。

fastclick 加快移动端点击响应时间

animate.css CSS3动画效果库

Normalize.css Normalize.css是一种现代的、CSS reset为HTML5准备的优质替代方案

2. 滑屏框架

适合上下滑屏、左右滑屏等滑屏切换页面的效果

slip.js

iSlider.js

fullpage.js

swiper

3.瀑布流框架

masonry

工具推荐

caniuse 各浏览器支持html5属性查询

paletton 调色搭配

)JavaScript简介

JavaScript:是一种脚本语言(程序),脚本是一条条的文字命令,执行时由系统的一个解释器将其一条条的翻译成机器可识别的指令然后执行,脚本语言是不经编译而是解释执行的,便于快速开发或一些轻量的控制,是一种在浏览器端执行的脚本语言;JavaScript是一种可以跨平台运行的动态的脚本语言(比如ASP,PHP,JSP等),只要支持JS的浏览器都支持JavaScript(现今几乎全支持)

作用:在浏览器中执行一些简单的运算,判断以减轻对服务器端的压力,但是从浏览器端采集的数据在服务器端也要进行检测判断

2)JavaScript的组成：

JavaScript基本由以下3部分组成：

2.1ECMAScript(基本语法):包括语法,关键字,保留字,类型,语句,运算符,对象

2.2Dom文档对象模型(封装好的一些函数库)在html与xml中都是用dom;Xml与html的应用程序接口(api)

2.3Bom浏览器对象模型:XMLHttpRequest,ActiveXObject对象等为浏览器特有的

3)JavaScript与Java的关系

JavaScript与Java没有直接的关系,间接的关系是1)JavaScript原名LiveScript吸收了Java的一些特性升级为了JavaScript2)JavaScript曾Java的热度(据说)

现今JavaScript是一门前端非常独立重要成熟的动态脚本语言,主要用于对HTML(Dom对象)的操作

4)JavaScript的编辑工具

个人推荐Visual Studio 2010及以上版本或者Visual Studio Code(其他的编辑器看个人爱好自选),它们都有强大的智能提示或者插件,非常好用也便于JavaScript的学习

5)现阶段学习目标

掌握JavaScript基础语法和JavaScript对Dom的操作(使用JavaScript操作html页面)

HTML DOM 节点

在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:

文档是一个文档。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。are text nodes。
注释是注释节点。

Document 对象

当浏览器载入 HTML 文档, 它就会成为 document 对象。

document 对象是HTML文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

浏览器支持

所有主要浏览器都支持 Document 对象。

Document 对象属性和方法

HTML文档中可以使用以上属性和方法:

属性 / 方法	描述
document.activeElement	返回当前获取焦点元素
document.addEventListener()	向文档添加句柄
document.adoptNode(node)	从另外一个文档返回 adapded 节点到当前文档。
document.anchors	返回对文档中所有 Anchor 对象的引用。
document.applets	返回对文档中所有 Applet 对象的引用。
document.baseURI	返回文档的绝对基础 URI
document.body	返回文档的body元素
document.close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
document.cookie	设置或返回与当前文档有关的所有 cookie。
document.createAttribute()	创建一个属性节点
document.createComment()	createComment() 方法可创建注释节点。
document.createDocumentFragment()	创建空的 DocumentFragment 对象，并返回此对象。
document.createElement()	创建元素节点。
document.createTextNode()	创建文本节点。
document.doctype	返回与文档相关的文档类型声明 (DTD)。
document.documentElement	返回文档的根节点
document.documentMode	返回用于通过浏览器渲染文档的模式
document.documentURI	设置或返回文档的位置
document.domain	返回当前文档的域名。
document.domConfig	返回normalizeDocument()被调用时所使用的配置
document.embeds	返回文档中所有嵌入的内容（embed）集合
document.forms	返回对文档中所有 Form 对象引用。
document. getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.getElementById()	返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()	返回带有指定名称的对象集合。
document.getElementsByTagName()	返回带有指定标签名的对象集合。
document.images	返回对文档中所有 Image 对象引用。
document.implementation	返回处理该文档的 DOMImplementation 对象。
document.importNode()	把一个节点从另一个文档复制到该文档以便应用。
document.inputEncoding	返回用于文档的编码方式（在解析时）。
document.lastModified	返回文档被最后修改的日期和时间。
document.links	返回对文档中所有 Area 和 Link 对象引用。
document.normalize()	删除空文本节点，并连接相邻节点
document.normalizeDocument()	删除空文本节点，并连接相邻节点的
document.open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
document.readyState	返回文档状态 (载入中……)
document.referrer	返回载入当前文档的文档的 URL。
document.removeEventListener()	移除文档中的事件句柄(由 addEventListener() 方法添加)
document.renameNode()	重命名元素或者属性节点。
document.scripts	返回页面中所有脚本的集合。
document.strictErrorChecking	设置或返回是否强制进行错误检查。
document.title	返回当前文档的标题。
document.URL	返回文档完整的URL
document.write()	向文档写 HTML 表达式或 JavaScript 代码。
document.writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

警告 !!!

在 W3C DOM核心，文档对象继承节点对象的所有属性和方法。

很多属性和方法在文档中是没有意义的。

HTML 文档对象可以避免使用这些节点对象和属性：

属性 / 方法	避免的原因
document.attributes	文档没有该属性
document.hasAttributes()	文档没有该属性
document.nextSibling	文档没有下一节点
document.nodeName	这个通常是 #document
document.nodeType	这个通常是 9(DOCUMENT_NODE)
document.nodeValue	文档没有一个节点值
document.ownerDocument	文档没有主文档
document.ownerElement	文档没有自己的节点
document.parentNode	文档没有父节点
document.previousSibling	文档没有兄弟节点
document.textContent	文档没有文本节点

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：iconfont字体生成原理及使用技巧
下一篇：用Vue制作穿梭框

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

这些移动端WEB开发的常见问题你知道几个-WEB前端

您的项目需求