<!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. android的 Base64

    byte[] key=Base64.decode("YWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4".getBytes(), Base64.DEFAULT);   ...

  2. EnrichPipeline文档

    https://sourceforge.net/projects/enrichmentpipeline/

  3. chrome，opera..通过file协议浏览html代码时，发送的ajax请求本地文件，会报跨域错误

    XMLHttpRequest cannot loadfile:///E:/webs/extJS/ext-3.3.0/examples/csdn/combobox.txt?_dc=14147389739 ...

  4. 使用delphi 开发多层应用（二十四）KbmMW 的消息方式和创建WIB节点

    KbmMW 中支持基于UDP的消息广播,也支持TCP/IP hub/spoke 方式,还有 基于UDP或者TCP/IP 的点对点的消息传输. 1.基于UDP的消息广播

  5. 2018.08.31 bzoj3566: [SHOI2014]概率充电器（概率dp+容斥原理）

    传送门 概率dp好题啊. 用f[i]" role="presentation" style="position: relative;">f[i] ...

  6. 2018.08.05 bzoj3223: Tyvj 1729 文艺平衡树（非旋treap）

    传送门 经典的平衡树问题,之前已经用splay写过一次了,今天我突发奇想,写了一发非旋treap的版本,发现挺好写的(虽然跑不过splay). 代码: #include<bits/stdc++. ...

  7. 2018.07.28 uoj#164. 【清华集训2015】V（线段树）

    传送门 线段树好题. 要求支持的操作: 1.区间变成max(xi−a,0)" role="presentation" style="position: rela ...

  8. tp5自动生成目录

    1.// 定义应用目录 define('APP_PATH', __DIR__ . '/../application/'); // 加载框架引导文件 require __DIR__ . '/../thi ...

  9. Git在windows环境下的使用教程

    前言 安装 配置 关于git使用的几个问题 后记 关于代码托管,以前用过vss和svn,看博客或论坛的时候,经常有人提到github,有很多著名的开源软件都托管在github,想来肯定不错(莫笑),当 ...

  10. （KMP 根据循环节来计算）Period -- hdu -- 1358

    http://acm.hdu.edu.cn/showproblem.php?pid=1358 Period Time Limit: 2000/1000 MS (Java/Others)    Memo ...