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">打电话给:</a>

发短信

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

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

<p><a href="mailto:wahaha@126.com">发电子邮件</a></p>

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

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

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

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

移动端web开发的更多相关文章

  1. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

  2. 移动端web开发的一些知识点

    整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成 ...

  3. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  4. 【前端】移动端Web开发学习笔记【1】

    下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...

  5. 移动端web开发基础概念

    最近在了解移动端web开发的相关知识,有些概念总是模糊不清,这次花费了一些时间整体的梳理了一遍. 分辨率 分辨率可以从显示分辨率与图像分辨率两个方向来分类.显示分辨率(屏幕分辨率)是屏幕图像的精密度, ...

  6. 移动端Web开发注意点

    不用考虑浏览器兼容性 移动端开发主要对象是手持设备,其中绝大部分是IOS和Android系统,so,在开发此类页面时不必纠结IE和其他一些2B浏览器的兼容性,webkit是本次开发重点. 当然,不同版 ...

  7. 移动端Web开发如何处理横竖屏

    <!Doctype html> <html> <head> <meta charset="utf-8"> <meta id=& ...

  8. 移动端web开发技巧(转)

    原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我 ...

  9. 安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)

    一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调 ...

  10. 移动端web开发 尽量哪些标签 常用标签及注意事项

    H5手机移动端WEB开发资源整合 常用的标签及注意事项: https://blog.csdn.net/u012118993/article/details/56023399 移动前端不得不了解的htm ...

随机推荐

  1. Redis_密码管理(转)

    一. 如何初始化redis的密码? 总共2个步骤: a.在配置文件中有个参数: requirepass  这个就是配置redis访问密码的参数. 比如 requirepass test123 b.配置 ...

  2. 出现了内部错误-网站中X509Certificate2加载证书时出错

    今天给网站配置了加密证书文件,用类X509Certificate2加载证书文件时,一直报出现了内部错误,但是Demo中用控制台程序加载证书没任何问题 读取证书文件的语句: X509Certificat ...

  3. #研发解决方案#分布式并行计算调度和管理系统Summoner

    郑昀 创建于2015/11/10 最后更新于2015/11/12 关键词:佣金计算.定时任务.数据抽取.数据清洗.数据计算.Java.Redis.MySQL.Zookeeper.azkaban2.oo ...

  4. MySQL中EXPLAIN命令详解

    explain显示了mysql如何使用索引来处理select语句以及连接表.可以帮助选择更好的索引和写出更优化的查询语句. 使用方法,在select语句前加上explain就可以了: 如: expla ...

  5. THINKPHP之连接数据库(全局配置)

  6. HDU(1285)—确定比赛名次

    /*最近都在复习期末了...好久没做题,都快没智商了*/   有N个比赛队(1<=N<=500),编号依次为1,2,3,....,N进行比赛,比赛结束后,裁判委员会要将所有参赛队伍从前往后 ...

  7. *HDU 1709 母函数

    The Balance Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  8. 在Excel中把横行与竖列进行置换、打勾号

    在Excel中把横行与竖列进行置换:复制要置换的单元,在新的单元上右键->选择性复制,会出现对话框,选中“置换”,即可在Excel中打勾号,左手按住ALT不放,右手在小键盘也就是右边的数字键盘依 ...

  9. Think in 递归

    网上写递归的文章可以用汗牛充栋来形容了,大多数都非常清晰而又细致的角度上讲解了递归的概念,原理等等.以前学生的时候,递归可以说一直是我的某种死穴,原理,细节我都懂,但是不管是在如何运用或者如何试试算法 ...

  10. Lisk沙箱漏洞分析及解决方案

    背景 比特股的创始人Daniel Larimer质疑了lisk系统中的一系列问题,绝大多数都被lisk的创始人之一Max正面回应过了,具体可以看看这个http://ethereum.stackexch ...