<!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. cnn 反向bp这个地方怎么推导??

  2. struts2乱码问题

    简介:做了个功能,用的struts2,表单提交到后台,接收后打印出来的数据乱码.   解决步骤: 1. struts.xml中配置<constant name="struts.i18n ...

  3. 常用C字符串函数

    static void str_repalce(char *src,char *from,char *to) {     char *p,*q;     int lenFrom;     int le ...

  4. QQ使用技巧

    1.改变真实地理位置 大家知道,现在很多QQ都是显示IP和地理位置的版本,这样一来,自己的位置就暴露了.其实想隐藏自己的位置也简单,只要用代理服务器就是了.不要把它看成很复杂的东西,建议去下载&quo ...

  5. Devexpress VCL Build v2014 vol 14.2.1 beta发布

    已经快到2015 年了. 14.2.1 beta 才出来了. 还好,有一些新东西. 官网地址 VCL Gauge Control Designed to clearly convey informat ...

  6. hdu-1066（大数）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1066 思路:统计2的个数,如果遇到5,就抵消,最后求和加上为来得及抵消的2的个数. 参考文章:http ...

  7. hdu-1026（bfs+优先队列）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1026 题意:输入n,m和一个n*m的矩阵, .表示通路: x表示墙: n表示有一个怪物,消灭它需要n个 ...

  8. 记一次web服务模块开发过程

    一.前言 之前在分析WCS系统的过程中,也赶上要开发其中的一个模块,用于和AGV系统对接完成一些取货.配盘等任务:在这里将这次模块开发的全过程记录一下,以便自己以后开发时能够更加快速的明白流程. 二. ...

  9. 2) 下载Maven

    http://maven.apache.org/ http://maven.apache.org/download.cgi Maven 3.3.3 (Binary tar.gz) Maven 3.3. ...

  10. not allowed to access to crontab because of pam configuration

    如果运行crontab如遇下面这样的错误: $ crontab -l You (zhangsan) are not allowed to access to (crontab) because of ...