典型代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。

initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。

在移动设备浏览器上,通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放(zooming)功能。

通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。

关于 viewport meta的更多相关文章

  1. [转载]ViewPort <meta>标记

    ViewPort <meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么.使用 ViewPort <meta>标记还表示文档针对移动 ...

  2. [转]手机web HTML头信息解释和viewport meta标签解释

    <meta charset="utf-8" /> <link rel="shortcut icon" href="favicon.i ...

  3. ViewPort <meta>标记

    ViewPort <meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么.使用ViewPort <meta>标记还表示文档针对移动设 ...

  4. viewport Meta Tag

    网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放. <meta name="viewport" conten ...

  5. 什么是Viewport Meta(width详解)及在手机上的应用

    viewport是专为手机浏览器设计的一个meta标签: 有些屏幕很小有智能手机,但分辩率却可以做得很大,比如小米4的默认分辨率为:1920*1080,比许多电脑桌面的都还大,传统桌面网站直接放到手机 ...

  6. HTML5 Viewport Meta Tag

    https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/U ...

  7. Using the viewport meta tag to control layout on mobile browsers

    A typical mobile-optimized site contains something like the following: <meta name="viewport& ...

  8. Meta标签中的viewport属性及含义

    一.什么是Viewport 手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个 ...

  9. HTML meta viewport属性详细说明

    viewport并非只是ios上的独有属性,在android.winphone上同样也有viewport,下面为大家详细介绍下HTML meta viewport 什么是Viewport 手机浏览器是 ...

随机推荐

  1. ui原则

    http://www.niushe.com/news/show-3683.html 设计师Joshua Porter发表了一篇文章——<Principles of User Interface ...

  2. QListWidget与QTableWidget的使用以及样式设置

    QListWidget和QTableWidget的使用和属性,QTableWidget和QListWidget样式表的设置,滚动条的样式设置 一.QListWidget的使用 //一.QListWid ...

  3. Java GC 日志详解(转)

    Java GC日志可以通过 +PrintGCDetails开启 以ParallelGC为例 YoungGC日志解释如下(图片源地址:这里) : FullGC(图片源地址:这里): http://blo ...

  4. Node.js 参考学习地址

    前段时间研究过Node.js 自从由于笔记本硬盘崩了之后就很少在家里搞程序了,但是很想学习之,只因最近在努力学习英文.技术之外的事也需要做好,我们毕竟不是为了技术而生,技术是我们生存的一门得力技能,唯 ...

  5. 图片拉伸: stretchableImageWithLeftCapWidth

    - (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight: (NSInteger)topCa ...

  6. Linux内核中常见内存分配函数(二)

    常用内存分配函数 __get_free_pages unsigned long __get_free_pages(gfp_t gfp_mask, unsigned int order) __get_f ...

  7. 网络配置——Linux运维基础

    今天把Linux的网络配置总结了一下,尽管并不难可是是个比較重要的基础.然后我也不知到自己以后是否会做运维,可是我知道自己比較喜欢刨根问底.还有就是我很珍惜我以前掌握过的这些运维的技能.今天突然间问自 ...

  8. Fix Elementary Boot Screen (plymouth) After Installing Nvidia Drivers

    Q:I just installed propietary nvidia drivers, after that the glowing “e” plymouth theme was gone, on ...

  9. Swift String 一些常用方法

    //字符串 //1 判断字符串是否为空 var test1Str="" var test1Str2:String = String(); println("test1St ...

  10. oracle优化思考-双刃剑

    oracle优化是一个双刃剑,特别注意这把剑用的场合:系统规划OLTP or OLAP 优化1:索引 在DML操作时.必须维护索引.假设大量的DML操作,想想看,IO是不是老高了? 索引长处:在非常多 ...