由于最近频繁对主题进行升级,这就自然导致,在制作过程发现了以前从来没有注意到过的问题,这里总结记录下:
一、控制移动页面缩放

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

1、详细说明
width:可视区域的宽度,值可为数字或关键词device-width;
height:同width;
intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放;
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别;
maximum-scale:用户可将页面放大的程序,1.0 将禁止用户放大到实际尺寸之上;
user-scalable:是否可对页面进行缩放,no 禁止缩放。
二、iOS 中页面自定义字体
以前我的移动端页面,对于 font-family 的定义才用的是 serif。可是为了在 PC 上阅读舒服点,多加了一个雅黑字体。但是在这次升级主题中发现,定义了 serif 后在 iOS 9 以上版本中显示的英文字体居然是衬线字体。研究了半天查了好多资料发现:

  1. body
  2. {
  3.     font-familyHelveticaArial"PingFang SC""Microsoft YaHei""WenQuanYi Micro Hei""tohoma,sans-serif";
  4. }

1、详细说明
其中PingFang SC这个是关键,添加到body中即可解决
三、去除移动端链接被点击时产生的高亮效果

  1. a, button, input
  2. {
  3.     -webkit-tap-highlight-color: rgba(255,0,0,0);
  4. }

四、禁用 webkit 浏览器内链接长按时的弹窗

  1. html, body
  2. {
  3.     -webkit-touch-callout: none;
  4. }

五、CSS3 实现渐变背景

  1. .body
  2. {
  3.     background: -webkit-linear-gradient(#a9cae8 0, #4187eb 25%, #7baaea 100%);
  4.     background: -moz-linear-gradient(#a9cae8 0, #4187eb 25%, #7baaea 100%);
  5.     background: linear-gradient(#a9cae8 0, #4187eb 25%, #7baaea 100%);
  6. }

六、自适应

  1. @media screen and (max-width:640px)
  2. {
  3.     /* 你所想要的css代码*/
  4. }

七、重定义 placeholder 样式

  1. .search-bar::-webkit-input-placeholder
  2. {
  3.     /*你所想要的重定义代码 */
  4. }
正文到此结束

留言

0条评论

LEAVE A REPLY

  • face face face face face face face face face face face face face face face face face face face face face face face face face