<!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. 新电脑的操作系统win10的所有设置问题汇总

    上来改的win7发现很多驱动没法装,装了也不能用,后来只能改win10了,另外win7的风扇声音也很大. 1.关闭win10自动更新.在服务里面禁用winupdate 2.注销改成了点头像,然后点注销 ...

  2. 前端之JavaScript笔记3

    一 创建添加节点 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. 2018.10.16 NOIP模拟 华莱士（并查集）

    传送门 按照题意模拟维护最小的环套树森林就行了. 然而考试的时候naivenaivenaive瞎写了一个错误的贪心. 代码

  4. Django的路由层（2）

    https://www.cnblogs.com/yuanchenqi/articles/8931472.html django2.0版的path Django默认支持以下5个转化器: str,匹配除了 ...

  5. Excel获得焦点变色

    1.  点击 Sheet 2. 右键菜单  查看代码 3. 复制如下代码 Private Sub Worksheet_SelectionChange(ByVal Target As Excel.Ran ...

  6. Vivado 常见报错

    1.[Synth 8-2543] port connections cannot be mixed ordered and named 说明例化时最后一个信号添加了一个逗号. 2. 原因:报告说明有一 ...

  7. 被“1”和“l”给坑了

    由于输入法的原因,导致小写的英文字母“L”和阿拉伯数字“1”长得非常像,在写秘钥的时候很容易把看错.由于对方发秘钥的时候给的是图片,而且不太清晰,手动输入的时候把“1”写成“l”了,对了好几遍秘钥也没 ...

  8. MySQL性能调优与架构设计——第 14 章 可扩展性设计之数据切分

    第 14 章 可扩展性设计之数据切分 前言 通过 MySQL Replication 功能所实现的扩展总是会受到数据库大小的限制,一旦数据库过于庞大,尤其是当写入过于频繁,很难由一台主机支撑的时候,我 ...

  9. SSH整合 第二篇 工程初建

    SSH整合,第二篇. 创建工程 这里只是测试和理解hibernate.建立Java工程就好了. 1.hibernate-4.2.21.jar hibernate包下的required,即\hibern ...

  10. Linux内存子系统及常用调优参数

    1>内存子系统 1>组件: slab    allocator buddy    system kswapd pdflush 2>虚拟化环境: PA:进程地址: HA:虚拟机地址: ...