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

本期介绍下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. Python+Requests接口测试教程(2):requests

    开讲前,告诉大家requests有他自己的官方文档:http://cn.python-requests.org/zh_CN/latest/ 2.1 发get请求 前言requests模块,也就是老污龟 ...

  2. 4.1 shell文本过滤、find、awk、grep

    文本过滤涉及到以下知识: 正则表达式.find.grep.awk.sed.合并与分割(sort.uniq.join.cut.paste.split). 正则表达式: 基本元字符集及其含义: 匹配IP地 ...

  3. 【c++基础】如何获取工程项目当前路径

    工程项目当前路径 #include <direct.h> int main( ) { ]; _getcwd(buffer, ); std::cout << buffer < ...

  4. HDU 5178:pairs(二分,lower_bound和upper_bound)

    pairs Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  5. CTF-练习平台-Misc之 Linux基础1

    十四.Linux基础1 下载打开文件,解压后发下是一个没有后缀名的文件,添加后缀名为txt,搜索关键词“KEY”,发现flag Linux???不存在的!

  6. Descriptor&web.xml

    Deployment Descriptor部署描述符: - 部署描述符是要部署到Web容器或EJB容器的Web应用程序或EJB应用程序的配置文件. - 部署描述符应包含EJB应用程序中所有企业bean ...

  7. yocto和bitbake

    一.yocto 1.yocto简介 Yocto 是一个开源社区通过它提供模版.工具和方法帮助开发者创建基于linux内核的定制系统,支持ARM, PPC, MIPS, x86 (32 & 64 ...

  8. FastAdmin 插件刷新缓存出现 200 红色提示框解决 always_populate_raw_post_data

    使用 phpStudy 全新安装了 FastAdmin,PHP 版本是 5.6. 安装完成后在刷新插件缓存时出现红色 提示消息,但状态 为 200. 打开 F12 看,发现有以下信息. <br ...

  9. 2019第1周日-MQ选型要点

    用消息中间件犹如小马过河,选择合适的才最重要,这需要贴合自身的业务需求,技术服务于业务.具体在选择上可从下面功能.性能.可靠性和可用性.运维管理.社区和生态.团队技术栈等维度来进行筛选. 具体技术选型 ...

  10. Oracle 10g RAC OCR 和 VotingDisk 的备份与恢复

    Oracle RAC 中OCR 和Voting Disk 备份在我的blog: Oracle RAC 常用维护工具和命令 中已经有说明,现在再次把它单独拿出做一个说明, 因为OCR 和Voting D ...