移动web学习笔记

时间 2019-11-09

标签移动 web 学习笔记栏目无线繁體版

原文原文链接

学习博客： 《移动资源整理》 BY 白树css

meta基础知识：html

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面:ios

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

viewport：web

viewport 既不是W3C的正式标准，也不是Web标准。它是Apple公司首先在iPhone中的Safari浏览器中实现了viewport meta标签，而后，其余浏览器也快速采纳了。chrome

@viewport CSS规则windows

使用@viewport规则和使用meta标签的效果同样。如：浏览器

@viewport{
  width:device-width;
  zoom:2;//zoom等同于viewport meta标签中的initial-scale属性
  max-zoom:3;//等同于maximum-scale
  min-zoom:0.50;//等同于minimum-scale
  user-zoom:fixed;// 等同于user-scaleble属性
}

@viewport 与 Media Query配合使用app

能够在media query中使用@viewport，达到更加精准的优化。如工具

@media screen and(max-width:400px){
   @-ms-viewport{width:320px;}
    ....
}

IE10/11，opera，webkit，moz都支持，须要加厂商前缀学习

@-webkit-viewport{...}
@-moz-viewport{...}
@-ms-viewport{...}
@-o-viewport{...}
@viewport{...}

（下边这些是刚知道的）

忽略讲页面中的数字识别为电话号码

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

忽略Android平台中对邮箱地址的识别

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

format-detection

format-detection是“格式检测”，是用来检测html中的一些格式，除了telephone和email还能够设置adress

●telephone

一串没加连接的数字，iPhone会自动给加连接样式而且点击这串数字还会自动拨号。

telephone=no --- 禁止吧数字转化为拨号连接

telephone=yes（默认值） --- 开启吧数字转为拨号连接，

●email

不识别邮箱，点击以后不会自动发送

email=no --- 禁止做为邮箱地址

email=yes（默认值） --- 开启把文字默认为邮箱地址

●adress

adress=no --- 禁止跳转到地图

adress=yes（默认值） --- 开启点击地址直接跳转到地图的功能。

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的Safari

<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- ios7.0版本之后，Safari上已看不到效果 -->

apple-mobile-web-app-capable
content可取yes（默认值）和no，是否须要显示工具栏和菜单栏

将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 可选default、black、black-translucent -->

apple-mobile-web-app-status-bar-style
控制状态栏显示样式，black-translucent(黑色加遮罩层的效果，显示)

viewport模板

viewport模板----通用

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no"/>        
  <meta name="format-detection" content="email=no"/> 
  <title>标题</title> 
</head> 
<body> 主体内容部分 </body> 
</html>

常见问题

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

中文字体使用系统默认的，英文的用Helvetica

body{font-family:Helvetica;}

移动端字体单位font-size选择px仍是rem

适配少部分手机设备，且分辨率对页面影响小，使用px

须要适配各类移动设备，使用rem

使用媒体查询设置根部字体的大小；

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

rem和em的区分

　rem(font size of the root element):是相对于跟元素的字体大小的单位。

兼容性：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+

　em(font size of the element):是指相对于父元素的字体大小的单位。

计算公式：1/父元素的font-size*须要转换的像素值=em值

针对Android、IOS、Windows设备全部媒体查询学习网址