<!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. 【Jsoup】Jsoup解析Html标签(Java后台解析)

    中文API网站(下载地址): http://www.open-open.com/jsoup/ 有时候编辑器传到后台的内容是带Html标签的,或者有时候需要形成一个完整的Html文档,也或者需要解析其中 ...

  2. hdu-1142（记忆化搜索+dij）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1142 思路:1.不是求最短路径,而是求如果两个点A,B直接相连,且A到终点的距离大于B到终点的距离,求 ...

  3. ubuntu编译centos7部署大象医生 dr-elephant

    github下载源码 ubuntu上安装play,配置好环境变量 暂时不支持基于spark2.x的编译,所以compile.conf中spark版本不变 调用build.sh开始编译 编译好后dist ...

  4. SqlCommand和SqlDataAdapter的区别

    SqlDataAdapter对象 一.特点介绍1.表示用于填充 DataSet 和更新 SQL Server 数据库的一组数据命令和一个数据库连接.2.在SqlDataAdapter和DataSet之 ...

  5. （并查集 贪心思想）Supermarket -- POJ --1456

    链接: http://poj.org/problem?id=1456 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82830#probl ...

  6. SetFocus (GetDlgItem (hwnd, idFocus))函数的各参数的具体含义

    Setfocus(HWMD hwnd):将窗口hwnd设置成获得焦点 GetDlgItem (hwnd, idFocus):此函数返回一个句柄 具体参数的含义: hwnd:包含该窗口标志位的对话框的句 ...

  7. Linux 输入输出（I/O）重定向

    目录 1.概念 Linux 文件描述符 2.输出重定向 格式 示例 注意 3.输入重定向 格式 示例 4.自定义输入输出设备 解释 示例 最后说两句 1.概念 在解释什么是重定向之前,先来说说什么是文 ...

  8. hdu 2190 悼念512汶川大地震遇难同胞——重建希望小学

    题目 这道题拿到的时候拼凑了一会,感觉挺难的,然后博客说是:递推,我觉得递推其实就是找规律. 这是别人的思路:对于n米的长度,可以是由n-1长度加1而来,对于增加的1,只有三块1*1的砖一种铺法: 还 ...

  9. Paxos与zookeeper

    1,什么是Paxos算法? Paxos算法是分布式计算领域中一个非常重要的算法,主要解决分布式系统如何就某个值(决议)达成一致的问题.一个典型的场景是分布式数据库的一致问题:如果分布式数据库的各个节点 ...

  10. maven下@override标签失效

    经常遇见此问题,现记录如下,以备下次查阅. 在pom文件添加配置: <plugin> <groupId>org.apache.maven.plugins</groupId ...