Web前端知识

首页 > 免费 > Web前端知识 >

移动WEB前端开发资源

来源:北京汇仁智杰科技有限公司   时间:2015-11-28   点击:

  meta篇

  1.视窗宽度

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

  其中 width=device-width 是设置视窗宽度为设备视窗宽度,还可以固定宽度,例如:width=640 则是640px的宽度(常见于微信);

  initial-scale=1.0 :设置缩放比例为1.0;

  minimum-scale=1.0 和 maximum-scale=1.0 :最小缩放比例和最大缩放比例;

  user-scalable=no :禁止用户自由缩放,user-scalable 默认值为 yes 。

  提示:刚刚那个是带全部参数的,一般常用的,有 user-scalable=no 就不用使用minimum-scale=1.0 和 maximum-scale=1.0 来强制禁止缩放了。

  2.自动识别格式

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

  content 里面的参数:telephone=no 是禁止浏览器自动识别手机号码,email=no 是禁止浏览器自动识别Email。

  3.完整模板

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

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

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

  CSS篇

  body {     font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; /*使用无衬线字体*/

  }

  a, img {     -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/

  }

  html, body {     -webkit-user-select: none; /*禁止选中文本*/     user-select: none;}button,input,optgroup,select,textarea {     -webkit-appearance:none; /*去掉webkit默认的表单样式*/

  }

  a,button,input,optgroup,select,textarea {     -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/

  }

  input::-webkit-input-placeholder {     color:#ccc; /*修改webkit中input的planceholder样式*/

  }

  input:focus::-webkit-input-placeholder {     color:#f00; /*修改webkit中focus状态下input的planceholder样式*/

  }

  body {     -webkit-text-size-adjust: 100%!important; /*禁止IOS调整字体大小*/

  }

  input::-webkit-input-speech-button {     display: none; /*隐藏Android的语音输入按钮*/

  }

网络营销推广 . 北京汇仁智杰科技有限公司!

地址:北京市昌平区回龙观龙冠大厦5层
咨询:13370157521
业务QQ:373002979
E - mail:sales @ huirenzhijie.com
企业网站备案:京ICP备15021091号-1

汇仁智杰与众不同

  • 有网络推广经验
  • 有网站建站队伍
  • 有大型网站建设经验
  • 致力于营销型网站建设
  • 始终坚持技术和服务同样重要
查看PC版网站
备案号:京ICP备15021091号-1 版权所有:汇仁智杰