<!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. Spring Boot集成Quartz注入Spring管理的类

    摘要: 在Spring Boot中使用Quartz时,在JOB中一般需要引用Spring管理的Bean,通过定义Job Factory实现自动注入. Spring有自己的Schedule定时任务,在S ...

  2. 2018.10.18 NOIP训练 01矩阵（组合数学）

    传送门 组合数学好题. 题目要求输出的结果成功把概率转化成了种类数. 本来可以枚举统计最小值为iii时的概率. 现在只需要统计最小值为iii时的方案数,每一行有不少于iii个1的方案数. 显然一行选i ...

  3. [K8S]污点调度

    如果不希望某个节点被调度可以使用以下命令进行设置  kubectl taint node master01 node-role.kubernetes.io/master="":No ...

  4. 基础的linux学习

    学习了这几个命令分享一下: 文本文件内搜索数据 grep -n -e pattern1 -e pattern2 file1 -n 搜索到的数据显示行号展示 -e pattern1 多个匹配模式下可以通 ...

  5. Swift的Optional类型

    我们使用Swift这个苹果新推出的编程语言已经有一段时间了.其中的一个极大的优点就是苹果称为“optional types”的东西.几乎所有的objective-c程序员都知道用nil来表示某个引用类 ...

  6. PrefixHeader.pch 在工程中的使用

    1)  新建一个pch文件 2) 在 工程 Build Settings 中搜索 header  将Precompile Prefix Header 置为YES 2) 选中pch文件, 将右侧相对路径 ...

  7. redis开机自启动脚本(linux)

    目前redis放在home下的文件夹中,写一个脚本,待系统启动的过程中,去启动该脚本. 脚本:redis.sh #!/bin/sh /home/juepei/Downloads/redis-3.0.0 ...

  8. 在Windows Server 2012 R2域环境中禁用（取消）密码复杂策略

    windows server 2012域环境默认启用密码复杂策略,例如: 至少有六个字符长,包含以下四类字符中的三类字符:英文大写字母(A 到 Z),英文小写字母(a 到 z),10 个基本数字(0 ...

  9. linux新定时器：timefd及相关操作函数

    timerfd是Linux为用户程序提供的一个定时器接口.这个接口基于文件描述符,通过文件描述符的可读事件进行超时通知,所以能够被用于select/poll的应用场景. 一,相关操作函数 #inclu ...

  10. 对Cookie和Session的理解

    本篇文章系自己总结经验,如果有朋友感觉哪里有问题,欢迎留言评论,谢谢~! Cookie和Session的产生背景: 在动态页面里面,每个变量都是有有效期的,所有的变量的最大生命周期就是一个脚本的周期( ...