典型代码

<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. 一步一步学python(四) - 字典

    1.字典的使用 创建字典:phonebook = {'Alice': '1234' , 'Beth':'9120'} 2.dict函数 >>>items = [('name','Gu ...

  2. webview相关链接

    http://tech.it168.com/a2011/0517/1191/000001191561_2.shtml http://www.eoeandroid.com/thread-272495-1 ...

  3. delphi idhttp 实战用法(TIdhttpEx)

    以delphi XE8 自带indy(10.5.8.0)组件为例,分享实战中遇到的问题及解决方法. TIdHttpEx 用法实例01[多线程获取网页](包含完整源码) 实例02(如何Post参数,如何 ...

  4. Python网络资源 + Python Manual

    如何学习Python + 如何有效利用Python有关的网络资源 + 如何利用Python自带手册(Python Manual) 都差点忘了说了,在看下面所有的内容之前,对于python版本不了解的, ...

  5. Makefile与shell脚本区别

    http://blog.chinaunix.net/uid-20672257-id-3345593.html 在Makefile可以调用shell脚本,但是Makefile和shell脚本是不同的.本 ...

  6. 面向对象继承实例(a如何继承b)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. ASP.NET获取IP的6种方法 【转】

    ).ToString();//方法四(无视代理)HttpContext.Current.Request.ServerVariables["HTTP_X_FORWARDED_FOR" ...

  8. android同时使用多个library时的问题

    剧情是这样,我的app要使用四个library,如:LibraryA,LibraryB.这两个库又都需要support.v4.jar. 由于加载的时间不同,所以四个support.v4.jar不同,出 ...

  9. Leetcode:best_time_to_buy_and_sell_stock_II题解

    一.题目 如果你有一个数组,它的第i个元素是一个股票在一天的价格. 设计一个算法,找出最大的利润. 二.分析 假设当前值高于买入值,那么就卖出,同一时候买入今天的股票,并获利.假设当前值低于买入值,那 ...

  10. Format类及其子类功能和使用方法具体解释

    Format类及其子类功能和使用方法具体解释 1.   Format类结构: ·        java.lang.Object ·        java.text.Format ·         ...