<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="utf-8" />
　　　　<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">  --------------   H5页面窗口自动调整到设备宽度,并禁止用户缩放页面

　　　　<meta name="apple-mobile-web-app-capable" content="yes"/>  -------------- 当网站添加主屏幕快速启动方式,可隐藏地址栏,针对ios的safari,而ios7.0以后,safari已看不到效果-

　　　　<meta name="apple-mobile-web-app-status-bar-style" content="black"/> ----------- 将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式

　　　　<meta name="format-detection" content="telephone=no"/>  -------------忽略将页面中的数字识别为电话号码

　　　　<meta name="format-detection" content="email=no"/> ------------------ 忽略android平台中对邮箱地址的识别

　　　　<title>标题</title>

　　　　<link rel="stylesheet" href="../dist/css/sm.min.css" />

　　　　<link rel="stylesheet" href="../dist/css/sm-extend.min.css" />   ----------- 引用SUI的css文件

　　　　<style>

　　　　　　body{
　　　　　　　　font-family:Helvetica; /*中文使用系统默认,英文用Helvetica*/
　　　　　　}

　　　　</style>

　　</head>
<body>

　　<div class="page-group">

　　　　<div class="page page-current">

　　　　　　<!--html代码-->

　　　　</div>

　　</div>

　　<script src="../dist/js/zepto.min.js"></script>

　　<script src="../dist/js/sm.min.js"></script>

　　<script src="../dist/js/sm-extend.min.js"></script> -------- 引用SUI的js文件

　　<script>

　　　　$.init(); //初始化

　　</script>

</body>
</html>

移动端页面模板viewport的更多相关文章

  1. 移动端开发viewport深入理解（转）

    一.viewport的概念   移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,就是浏览器上用来显示网页的那部分区域,但viewport不局限于浏览器可视区域 的大小,它 ...

  2. 移动端开发-viewport

    1.viewport viewport 即设备 屏幕上显示网页的区域.因为移动设备屏幕比较小,为了能让移动设备能够显示更多内容,默认设置的viewport 并不是屏幕真是像素点的宽度,一般为980px ...

  3. 浅谈移动端三大viewport

    我们通常在写移动端页面时,往往都会在html页面中加入这样一段话 <meta name="viewport" content="width=device-width ...

  4. 移动端开发-viewport与媒体查询

    首先要知道,在移动开发中,手机的浏览器会默认网页是为宽屏而设计的,它会缩小整个页面来适应屏幕. 1. 不使用viewport出现的问题 提到响应式设计,大家首先想到的可能是 Bootstrap , @ ...

  5. 移动端meta viewport

    <meta name="viewport" content=" width=device-width, user-scalable=no, initial-scal ...

  6. 移动端与PC端的viewport

    第一种解析: 设备像素,就是我们直觉上觉得"靠谱"的像素,这些像素为所使用的各种设备提供了正规的分辨率,并且其值可以通过(通常情况下)从screen.width/height属性中 ...

  7. 移动端布局最佳实践（viewport+rem）

    通过前几天写的两篇博客(浅谈移动端三大viewport和移动端em和rem区别),我们现在来总结一下如何实现一个最佳方案. 之前在第二篇博客中提到过我们可以使用媒体查询来针对不同设备及做适配,如下图 ...

  8. 移动端适配（rem & viewport）--移动端开发整理笔记（四）

    移动端适配 通过rem适配 em: 根据元素自身的字体大小来计算自己的尺寸 rem: (root em) 根据根节点(html)的字体大小来计算自己的尺寸   我们知道,在不同的手机设备,分辨率大小是 ...

  9. viewport理解

    viewport预备知识 dpr === dppx dpr:device pixel ratio 设备像素比 dppx:Number of dots per px unit 每像素有多少点 . 1dp ...

随机推荐

  1. hadoop 学习（四）之java操作hdfs

    1.导入hadoop jar包 将hadoop/share/common/目录.hadoop/share/common/lib/目录.hadoop/hdfs/目录.下的jar包加入eclipse. 2 ...

  2. 2018.09.28 牛客网contest/197/C期望操作数（状态转移+前缀和递推）

    传送门 比赛手动打了四项感觉有规律,调了40min+之后重新手算了后面几项发现只有前四项满足规律233. 首先这道题只跟q−xq-xq−x有关. 我们尝试找找递推关系. 我们令f[i]f[i]f[i] ...

  3. 2018.09.08 bzoj1531: [POI2005]Bank notes（二进制拆分优化背包）

    传送门 显然不能直接写多重背包. 这题可以用二进制拆分/单调队列优化(感觉二进制好写). 所谓二进制优化,就是把1~c[i]拆分成20,21,...2t,c[i]−2t+1+1" role= ...

  4. head first 设计模式文摘

    1 欢迎来到设计模式世界:设计模式入门 2 让你的对象知悉现况:观察者模式 3 装饰对象:装饰者模式 4 工厂模式:烘烤OO的精华 5 单件模式:独一无二的对象 6 命令模式:封装调用 7 适配器模式 ...

  5. BZOJ 1011 [HNOI2008]遥远的行星 (误差分析)

    1011: [HNOI2008]遥远的行星 Time Limit: 10 Sec  Memory Limit: 162 MBSec  Special JudgeSubmit: 4974  Solved ...

  6. SPSS--回归-多元线性回归模型案例解析

    多元线性回归,主要是研究一个因变量与多个自变量之间的相关关系,跟一元回归原理差不多,区别在于影响因素(自变量)更多些而已,例如:一元线性回归方程 为: 毫无疑问,多元线性回归方程应该为: 上图中的 x ...

  7. webuploader php上传视频

    webuploader 上传大视频文件 在网上找了一个,自己重新组合了下,两个主要的文件,再加上官方下载的文件.其中有几个重要的点. 1.上传存放视频目录为了测试 直接777 2.fileupload ...

  8. 基于NLP和GAN的小说影视化

    轮廓: https://tieba.baidu.com/p/1271120336 着色:

  9. （线段树 区间查询更新） Can you answer these queries? -- hdu--4027

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=4027 分析:因为这个操作是把一个数变成平方根,所以显得略棘手,不过如果仔细演算的话会发现一个2^64数的 ...

  10. ZOJ2417 Lowest Bit 2017-04-18 20:53 38人阅读 评论(0) 收藏

    Lowest Bit Time Limit: 2 Seconds      Memory Limit: 65536 KB Given an positive integer A (1 <= A ...