好久都没更新博客了,最近一年转型移动端,当然网页端也得兼顾,慢慢写一写基本性的文章,多积累。

本期介绍下viewport的一些使用:

先看看viewport在页面中的样子:

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

先罗列下移动页面遇到的单位:

px、pt、pc、sp、em、rem、dp、dip、ppi、dpi、ldpi、mdpi、hdpi、xhdpi、xxhdpi……

手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,窗口可大于或小于手机的可视区域,一般手机默认viewport大于可视区域。这样不会破坏没有针对手机浏览器优化的网页的布局,用户可以通过平移和缩放来看网页的其他部分。

HTML5之viewport使用的更多相关文章

  1. html5中viewport使用

    html5中viewport使用 转载自:http://www.maoegg.com/the-usage-of-viewport-in-html5/ 用html5开发移动应用时往往会遇到手机的分辨率或 ...

  2. HTML5之Viewport详解

    做移动Web开发也有一年多的时间了,虽然手机上浏览器对于PC上来说很友好了,但是手机各种设备的显示尺寸分辨率大小不一也要花大心思兼容它们. 关于HTML5中Viewport的文章Google,百度一搜 ...

  3. [转] 移动平台Html5的viewport使用经验

    转自:http://blog.csdn.net/wuruixn/article/details/8591989 问题描述 web页面采用html5技术实现,在系统登录页面中使用frameset.fra ...

  4. HTML5的viewport使用

    viewport 语法介绍: <!-- html document --> <meta name="viewport" content=" height ...

  5. html5中viewport与meta详解

    网上解释手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中 ...

  6. HTML5 Viewport Meta Tag

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

  7. HTML5 viewport 标签与 CSS3 background-size 属性 使图片完全适应区域内容

    要使一张图片不论在移动端还是在桌面端都能适应区域内容,可以使用 HTML5 的 viewport 标签结合 CSS3 的 background-size 属性. 适应区域内容是指图片的宽或高的长度满足 ...

  8. cocos2d-js 入门 (主要是HTML5)

    cocos2d-js是cocos2d-x的JavaScript版本,真正跨全平台的游戏引擎,采用原生JavaScript语言,可发布到包括Web平台,iOS,Android,Windows Phone ...

  9. 2016.3.16__HTML5新特性__第八天

    HTML 5 + CSS 3 假设您认为这篇文章还不错,能够去H5专题介绍中查看很多其它相关文章. 今日代码非常冗杂,所以非常多内容直接摘自网上,假设造成您的不适.请留言告知. 非常感谢. 输入标签, ...

随机推荐

  1. 基于VUE2.0的分页插件(很好用,很简单)

    基于jQuery的分页插件很多,今天分享一下基于Vue的分页插件pagination.js,该插件使用用感觉很不错,简单不复杂,现将个人使用过程中的方法与遇到的问题以及实例分享出来. 下载解压的主要目 ...

  2. SSH 获取GET/POST参数

    在做项目的API通知接口的时候,发现在SSH框架中无法获取到对方服务器发来的异步通知信息.最后排查到的原因可能是struts2对HttpServletRequest进行了二次处理,那么该如何拿到pos ...

  3. 1.2.2 Text_Reverse

    Text Reverse Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Proble ...

  4. Executor 框架

    Java的线程既是工作单元,也是执行机制.从JDK5开始,把工作单元与执行机制分离开来.工作单元包括Runnable和Callable,而执行机制由Executor框架提供. Executor 框架简 ...

  5. Monocular 集成harbor helm 仓库

      harbor 已经支持了helm 仓库(使用chartmuseum),Monocular 是一个不错的helm 仓库可视化工具 测试Monocular集成harbor 私服功能 使用docker- ...

  6. x86函数调用约定

    以下摘自<IDA Pro>,貌似有一些细节之处没有交代清楚呢,需要进一步思考.实践. 了解栈帧的基本概念后,接下来详细介绍它们的结构.下面的例子涉及x86体系结构和与常见的x86编译器(如 ...

  7. ereg()替换为preg_match(),ereg_repalce替换为preg_replace得加斜杠

    PHP 5.3 ereg() 无法正常使用,提示“Function ereg() is deprecated Error”是因为它长ereg 函数进行了升级处理,需要像preg_match使用/ /来 ...

  8. c++标准库的所有类型

    标准库的组成:    前言就到此为止.从最宏观的层面上看,C++标准库由十个部分组成:语言支持.诊断.通用工具.字符串.本地化.容器.迭代器.通用算法.数值算法和I/O. 头文件组成:    C++ ...

  9. MHA之Binlog Dump (GTID)僵尸进程清理

      master存活的状态下切换 masterha_master_switch --conf=/etc/masterha/app1.cnf --master_state=alive --new_mas ...

  10. PHP安全相关的配置(1)

    PHP作为一门强大的脚本语言被越来越多的web应用程序采用,不规范的php安全配置可能会带来敏感信息泄漏.SQL注射.远程包含等问题,规范的安全配置可保障最基本的安全环境.下面我们分析几个会引发安全问 ...