常见问题 1.移动端如何定义字体font-family 三大手机系统的字体: ios 系统 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue 无微软雅黑字体 android 系统 默认中文字体是Droidsansfallback 默认英文和数字字体是Droid Sans 无微软雅黑字体 winphone 系统 默认中文字体是Dengxian(方正等线体) 默认英文和数字字体是Segoe 无微软雅黑字体 各个手机系统有自己的默认字体,且都不…

原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我们站在潮头上. META相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,…

META相关 1. 添加到主屏后的标题(IOS)…

META相关 1. 添加到主屏后的标题(IOS)<meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) <meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-touch-fullscreen&q…

昨天的<移动 Web 开发技巧>的这篇文章,大家反响不错,因为这些问题在大家日常写移动端的页面时经常遇到的.所以那个文章还是超级实用的,那么我们今天继续来分享一下移动端的web开发技巧吧,希望对大家有所帮助. PS:不要让小伙伴第一次写移动端像下面这位一脸的蒙逼哈哈… … 第一.启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果) <meta name="apple-mobile-web-app-c…

一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调试处处是alert的,这估计是最常用的办法了.以前很多时候为了预览页面在移动设备上的效果,需要先将页面上传到测试服务器,再将url输入到设备浏览器,或者使用第三方二维码扫码应用,通过移动设备访问打开浏览实际效果,每次换设备都要重复这些操作,页面多的话这些繁琐的事情就特别让人厌烦了.移动互联网的浪潮,…

一.函数库 underscoreJS _.template: <ol class="carousel-indicators"> <!--渲染的HTML字符串--> </ol> <div class="carousel-inner" role="listbox"> <!--渲染的HTML字符串--> </div> /*取到模版当中的字符串*/ var pointTemplate…

文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. HTML5 可以做什么 拍照 获取地理位置 手势 canvas 绘图和动画(硬件加速) localstorage,本地缓存 HTML5 动画效果 demo http://fff.cmiscm.com/#!/main CSS3 动画 http://isux.tencent.com/css3/inde…

整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成2px. 但在IOS8中,已经支持0.5px了,那就意味着, 在devicePixelRatio=2的时候,我们可以使用css设置为0.5. 平时用的比较多的也是使用transform了: div{ height:1px; background:#; -webkit-transform: scale…

上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践:<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> Flex弹性盒模型 来源:慕课网 源HTML文件(备份下载):web_flex…