移动端开发的笔记1

最新推荐文章于 2024-11-16 10:46:47 发布

任飘扬

最新推荐文章于 2024-11-16 10:46:47 发布

阅读量281

点赞数

CC 4.0 BY-SA版权

分类专栏：移动端开发文章标签： wap

本文链接：https://blog.youkuaiyun.com/qq_21978621/article/details/49155191

移动端开发专栏收录该内容

1 篇文章

订阅专栏

最近正好的在做wap端的手机页面的，正好整理自己的笔记的
1.wap端的基本html5初始化的布局

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
            <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, email=no" />
            <title>demo</title>
        </head>

        <body>
            内容区
        </body>
    </html>

2.meta标签的使用：


``` 移动端前端制作有些地方不同于互联网，这篇主要讨论的是meta标签。meta标签位于之间。是主要辅助HTML结构层的。meta标签不管在互联网前端还是在移动端都起了很重要的作用。这里只讨论移动端。 
这是一个HTML5为语言标准的说明文档。第一组meta标签，大家比较常见。这个是经常用到的。它表明的意思是它的内容是html文档，且网页编码采用的是utf-8编码。utf-8编码主要针对是简体中文和英文。正确的编码定义很有必要。否则会导致网页上的文字变成乱码```





<div class="se-preview-section-delimiter"></div>

可以看看上面的代码的片段：

第二组meta标签就是移动端特属的标签了。它表明的意思是它是一个视图窗口。其视图窗口内容的宽度等于移动端设备的默认宽度。inital-scale表示的初始的缩放比例.一般设置为1.0倍。maximum-scale=1.0表示的允许用户缩放的最大比例。user-scalable=no表示是否支持用户手动进行缩放。

第三组和第四组meta标签都是针对IOS系统的专属标签。第三组meta标签表示的意思是是否启动webapp功能。说通俗一点。就是当点击网页添加至主屏幕功能时，会在主屏幕上生成一个图标。点击该图标会进入webapp功能。就是模拟本地应用的模式来浏览web页面。生成的图标可以自定义，启动webapp时的开始时的图片也可以定义。这个是link标签的作用，我会在介绍link标签时，单独进行说明。

3.移动端的字体的：

大家都知道每个浏览器都有的默认的字体，当然每个移动的设备也是有默认的字体的，安卓和ios ，winphone 都是有自己的默认的字体，可是这3移动设备都没有微软雅黑的字体，所以在设置的我们通常是这么写：

@font-face {
font-family: ‘MicrosoftYaHei';
src: url(‘MicrosoftYaHei.eot’); /* IE9 Compat Modes */
src: url(‘MicrosoftYaHei.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘MicrosoftYaHei.woff’) format(‘woff’), /* Modern Browsers */
url(‘MicrosoftYaHei.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘MicrosoftYaHei.svg#MicrosoftYaHei’) format(‘svg’); /* Legacy iOS */
}

让客户自己下载的微软雅黑的字体的，体验是太差，还有的流量太耗的
ios 系统

默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
无微软雅黑字体
android 系统

默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
无微软雅黑字体
winphone 系统

默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe
无微软雅黑字体
结论

各个手机系统有自己的默认字体，且都不支持微软雅黑
如无特殊需求，手机端无需定义中文字体，使用系统默认
英文字体和数字字体可使用 Helvetica ，三种系统都支持
/* 移动端定义字体的代码 */body{font-family:Helvetica;}

还有一点很重点的移动端是字体是用px还是是em？

我的个人习惯是用px的，因为我的em换算不是太好的，

EM作为相对单位，是基于父级单位来计算，换算起来有点麻烦
PX是绝对单位，但是，严格来说PX也是相对的单位，因为屏幕分辨率的不同，PX的大小也是不同
其实现在还有一种的“rem”的

REM:Equal to the computed value of ‘font-size’ on the root element.
IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了，我可以放肆的使用 rem
换算简单，
T1VhurXvNXXXb9uvne-700-270

假设：

默认的 html font-size=16px，那么我想设置12px 的文字就是：12÷16=0.75（rem）

html{
font-size:62.5%; /* 10/16=62.5% */
}

body{
font-size:12px;
font-size:1.2rem ; /* 12/10=1.2 */
}

p{
font-size:14px;
font-size:1.4rem;
}

如果还是不会就用： CSS 预处理工具（Sass、LESS 、Stylus等）自动计算 rem 值，

可以看看上面的代码的片段：

> 第二组meta标签就是移动端特属的标签了。它表明的意思是它是一个视图窗口。其视图窗口内容的宽度等于移动端设备的默认宽度。inital-scale表示的初始的缩放比例.一般设置为1.0倍。maximum-scale=1.0表示的允许用户缩放的最大比例。user-scalable=no表示是否支持用户手动进行缩放。
> 
> 
> 
>  
> 第三组和第四组meta标签都是针对IOS系统的专属标签。第三组meta标签表示的意思是是否启动webapp功能。说通俗一点。就是当点击网页添加至主屏幕功能时，会在主屏幕上生成一个图标。点击该图标会进入webapp功能。就是模拟本地应用的模式来浏览web页面。生成的图标可以自定义，启动webapp时的开始时的图片也可以定义。这个是link标签的作用，我会在介绍link标签时，单独进行说明。
> 


3.移动端的字体的：

大家都知道每个浏览器都有的默认的字体，当然每个移动的设备也是有默认的字体的，安卓和ios ，winphone 都是有自己的默认的字体，可是这3移动设备都没有微软雅黑的字体，所以在设置的我们通常是这么写：

@font-face {
font-family: ‘MicrosoftYaHei’;
src: url(‘MicrosoftYaHei.eot’); /* IE9 Compat Modes */
src: url(‘MicrosoftYaHei.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘MicrosoftYaHei.woff’) format(‘woff’), /* Modern Browsers */
url(‘MicrosoftYaHei.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘MicrosoftYaHei.svg#MicrosoftYaHei’) format(‘svg’); /* Legacy iOS */
}
“`

让客户自己下载的微软雅黑的字体的，体验是太差，还有的流量太耗的
**ios 系统
默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
无微软雅黑字体
android 系统
默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
无微软雅黑字体
winphone 系统
默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe
无微软雅黑字体**
结论