移动端web开发

Posted 蓝眼睛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端web开发相关的知识,希望对你有一定的参考价值。

meta基础知识点:

页面自动调整到设备宽度,并禁止用户缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />

针对ios的meta标签:

⑴ 允许全屏浏览页面的标签:

<meta name="apple-mobile-web-app-capable" content="yes" />

⑵ safari顶端状态栏样式定义/隐藏:

<meta name="apple-mobile-web-app-status-bar-style" content="blank" />  <!--隐藏状态栏-->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />  <!--定义状态栏样式为暗黑色-->

⑶ ios会把类似电话号码的数字变为可点击并添加到电话的连接,我们可以这样禁用它:

<meta name="format-detection" content="telephone=no" />

(4)忽略android平台中对邮箱地址的识别 

<meta name="format-detection" content="email=no" /> 

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

body{font-family: "Helvetica Neue", Helvetica, sans-serif;}

在android或者IOS下 拨打电话代码如下:

<a href="tel:13512656621">打电话给:13512656621</a>

发短信

<a href="sms:10086">发短信给: 10086</a>

调用手机系统自带的邮件功能

<p><a href="mailto:[email protected]">发电子邮件</a></p>

webkit表单输入框placeholder的颜色值改变:

input::-webkit-input-placeholder{color:red;}//颜色改为红色 
input:focus::-webkit-input-placeholder{color:blue;}//用户点击变为蓝色

在IOS下清除输入框的内阴影

input,textarea {-webkit-appearance: none;}

 

以上是关于移动端web开发的主要内容,如果未能解决你的问题,请参考以下文章

移动端web开发2

移动Web开发基础

移动端Web开发 基础知识

移动Web开发基础

建设移动端web开发会涉及到的meta标签

移动端web开发初探之Vuejs的简单实战