viewport Meta Tag

网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> width - viewport的宽度 height - viewport的高度 in…

HTML5 Viewport Meta Tag

https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html https://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/ http://developer.blackberry.com/pl…

Using the viewport meta tag to control layout on mobile browsers

A typical mobile-optimized site contains something like the following: <meta name="viewport" content="width=device-width, user-scalable=no"> The width property controls the size of the viewport. It can be set to a specific number…

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

豆知识扩展：HTML<meta> tag

豆知识: HTML<meta> tag Metadata 是关于数据的信息. The <meta> tag provides metadata关于网页.Metadat不会显示在webpage上,他只用于机器解析. Meta元素用于指定网页描述,关键字,作者信息等. metadata能够被用于浏览器(如何显示内容或加载网页),搜索引擎(keywords),或者其他网页服务. web designers take control over the viewport (the user'…

关于 viewport meta

典型代码 <meta name="viewport" content="width=device-width, initial-scale=1.0"> width 属性控制设备的宽度.假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上. initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放. 在移动设备浏览器上,通过为 viewport meta…

[转载]ViewPort <meta>标记

ViewPort <meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么.使用 ViewPort <meta>标记还表示文档针对移动设备进行了优化.ViewPort <meta>标记的content值是由指令及其值组成的以逗号分隔的列表. 例: <meta name=”viewport” content=”width=240, height=320, user-scalable=yes, initial-scale=2…

ViewPort <meta>标记

ViewPort <meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么.使用ViewPort <meta>标记还表示文档针对移动设备进行了优化.ViewPort <meta>标记的content值是由指令及其值组成的以逗号分隔的列表. 例: <meta name=”viewport” content=”width=240, height=320, user-scalable=yes, initial-scale=2.5…

什么是Viewport Meta（width详解）及在手机上的应用

viewport是专为手机浏览器设计的一个meta标签: 有些屏幕很小有智能手机,但分辩率却可以做得很大,比如小米4的默认分辨率为:1920*1080,比许多电脑桌面的都还大,传统桌面网站直接放到手机上阅读时,界面就会显得非常小,阅读体验就很差,就样就需要一种将原始视图在手机上放大的机制,使用viewport标签可以解决这个问题,如 <meta name="viewport" content="width=device-width, initial-scale=1&qu…

(转)Ratchet教程：meta与link标签

原文:http://www.w3cplus.com/mobile/meta-and-link-tags-for-ratchet.html Ratchet教程:meta与link标签作者:大漠日期:2014-04-29 通过<Ratchet教程:安装>一文,大家对Ratchet有了一个初步的了解.那么从这一节开始,我们一起来开始实战.通过实战来更好的学习和了解Ratchet,更希望学习了Ratchet之后,大家在制作移动页面的…

自适应页面设计: Viewport控制， media query和相对单位

viewport,视口,就是对用户的可见部分, 大小因设备而不同.H5引入. * 没有它: 整体缩放 ( 老网页是固定的大小,浏览器在手机上只是简单地缩放整个页面,所以用户体验很差) * 有了它: 浏览器会重新排版.而且, 屏幕大小就是Chrome仿真器提示的size. 所以, mobile页面必须要它用户习惯: * 用户都习惯上下滚动网站,而不是横向滚动,因此,如果用户必须横向滚动或缩放页面才能阅读,那么这将给用户带来糟糕的体验. Best Practice: * 自适应设计的主要概念基础是…

我对BFC的理解

最初这篇文章打算回答寒冬大神的第一问,谈谈CSS布局.本来呢我以为布局主要涉及float跟display相关属性,以及他们的包含框.静态位置等等.后来看了大神的一片面试文章,嗯?这里怎么还有个BFC,这是神马东东.待我搜索一下,萨萨萨,不看不知道,越看越糊涂,这到底是个神马东东...经过一个周时间的查阅资料和自我思考,在此总结一下我对BFC的认识,愿与各位道友分享,欢迎拍砖! 对CSS有了解的道友们肯定都知道盒式模型这个概念,对一个元素设置CSS,首先需要知道这个元素是block还是inline…

html规范

1 前言 HTML 作为描述网页结构的超文本标记语言,在百度一直有着广泛的应用.本文档的目标是使 HTML 代码风格保持一致,容易被理解和被维护. 2 代码风格 2.1 缩进与换行 [强制] 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格或 tab 字符. 示例: <ul> <li>first</li> <li>second</li> </ul> [建议] 每行不得超过 120 个字符. 解释: 过长的代码不容易阅读与维护…

FK JavaScript之:ArcGIS JavaScript API之地图动画

地图要素动画应用场景:动态显示地图上的要素的属性随着时间的改变而改变,并根据其属性的变化设置其渲染.比如:某水域项目中,随着时间的变化,动态展现水域的清淤进度本文目的:对ArcGIS JavaScript 官网示例中的代码进行分析注解.下述代码对官网示例进行了部分调整示例网址1: 示例网址2: 示例中csv文件以下为代码注释: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&…

iPhone 6 Screen Size and Web Design Tips

Apple updated its iPhone a bit ago making the form factor much bigger. The iPhone 6 screen size is both wider and taller and the iPhone 6 Plus also has a higher pixel density. This is an update to my previous post about designing websites for the iPh…

HTML编码规范

HTML编码规范 1 前言 HTML作为描述网页结构的超文本标记语言,在百度一直有着广泛的应用.本文档的目标是使HTML代码风格保持一致,容易被理解和被维护. 2 代码风格 2.1 缩进与换行 [强制] 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格或 tab 字符. 示例: <ul> <li>first</li> <li>second</li> </ul> [建议] 每行不得超过 120 个字符. 解释: 过长的代码不容…

DOM何时Ready

由于script标签在被加载完成后会立即执行其中代码,如果在代码中要访问HTMLElement,可是这时候元素还没有加载进来,所以对元素的操作统统无效. 最早的时候使用window.onload = function(){...},使得代码在页面完全加载完成后执行,这种方法对于页面资源很小的情况下是没问题的.弊端在于有时候页面中回加载一些比较费时的img.flash等资源,这种情况下浏览器会一直等待这些资源加载完成后再执行js代码.而浏览器中有DOM树跟Render树的区分,我们当然希望DOM树…

webapp尺寸

一.viewport宽度起源:PC端的网站要显示在移动端有什么问题? 如果把移动端的可是区域设置到(320-768)的话,大部分网站都会因为太窄而显示错乱所以浏览器默认把viewport[这个viewport指的是layout viewport]设置为一个较宽的值980px或者1024px,至少保证PC网站在移动端上可以显示,只是超出部分出行横向滚动. 二.概念 1.css像素 html页面中单位是px,在pc中往往1 css px=1物理像素 css像素是相对值,在不同设备中1px对应不同…

css外边距合并和z-index的问题

参考这篇文章, 将外边距的折叠参考这篇文章, 将bfc的生成, bfc的应用参考这篇文章 position: absolute的元素, 仍然具有内填充padding和border边框属性样式, 但没有外边距margin属性? 这个说法是错误的! 实际操作表明, 所有的style样式属性都是具有的! 该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴.如果为正数,则离用户更近,为负数则表示离用户更远. z-index 与 position属性的关系? 关于stacki…

使用jQuery Mobile的注意事项（译）

翻译编辑自:http://www.appnovation.com/blog/7-things-know-about-jquery-mobile-working-it 一.Android和IOS的内置键盘(Native keyboard)是不一样的对手机的内置键盘的操作是比较复杂和富有争议的,不同的手机可能需要不同的css.Android使用的是第三方的键盘插件(3rd party keyboards ),如 Google Keyboard 和 SwiftKey. 可设置input的type属性…

15款增强web体验的Javascript库

1. Pikaday: Standalone JavaScript Datepicker 这是一个令人耳目一新的JavaScript日期选择器轻量轻(压缩和gzip后小于5KB) 没有依赖其它JS框架(但能够与Moment.js一起使用) 模块化的CSS类,方便 2. Mailcheck Mailcheck.js是一个Javascript库和jQuery插件,用于检测email地址的域名.当域名不正确时,会提供相应的建议. 3. BonsaiJS Bonsai 是一个开源的JavaScript…

HOWTO: Create native-looking iPhone/iPad applications from HTML, CSS and JavaScript

HOWTO: Create native-looking iPhone/iPad applications from HTML, CSS and JavaScript Though it's not widely known, you can write native-feeling iOS apps for the iPhone and iPad in JavaScript (+ HTML and CSS). In this article, I'll explain how to: stri…

CSS定位规则之BFC 你居然一直不知道的东西！！！！！

相关文档: http://blog.sina.com.cn/s/blog_877284510101jo5d.html http://www.cnblogs.com/dojo-lzz/p/3999013.html http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html BFC(Block Formatting CoFSADntext)直译为"块级格式化范围" 1.是 W3C CSS 2.1 规范中的一个概念,它…

Android 之用WebView显示网页

WebView可以使得网页轻松的内嵌到 app 里,还可以直接跟js相互调用. WebView有两个方法:setWebChromeClient 和 setWebClient (1) setWebClient:主要处理解析,渲染网页等浏览器做的事情: (2) setWebChromeClient:辅助WebView处理Javascript的对话框,网站图标,网站title,加载进度等. WebViewClient就是帮助WebView处理各种通知.请求事件的. 1.在 AndroidManifes…

[转] Understanding Twitter Bootstrap 3

Bootstrap is a popular, open source framework. Complete with pre-built components it allows web designers of all skill levels to quickly build a site. The only drawback I can find to Bootstrap is that it is built on Less. Less is a CSS preprocessor,…

WebView使用详解（一）——Native与JS相互调用（附JadX反编译）

念念不忘,必有回响,永远坚持你所坚持的! 一直在用WebView,还没有系统的总结过它的用法,下面就系统的总结下,分享给大家一.基本用法 1.加载在线URL void loadUrl(String url) 这个函数主要加载url所对应的网页地址,或者用于调用网页中的指定的JS方法(调用js方法的用法,后面会讲),但有一点必须注意的是:loadUrl()必须在主线程中执行!!!否则就会报错!!!. 注意:加载在线网页地址是会用到联网permission权限的,所以需要在AndroidManif…

[转载]移动终端浏览器初始设置apple-mobile-web-app-capable

这两句话的确很有用,有了它,手机访问的时候像样了. 原文地址:移动终端浏览器初始设置apple-mobile-web-app-capable作者:素水凌心移动终端浏览器默认设置视口的宽度和初始规模.最近做的一个移动终端的项目,遇到一个默认设置更改的问题.起初非常怀疑是自己的html写的有问题.经过一番页面尺寸的测试之后终于找到问题根源.知道是什么问题就可以找解决的方法了.<meta name="viewport" content="width=device-width…

Responsive Design in 3 Steps

Responsive web design is no doubt a big thing now. If you still not familiar with responsive design, check out the list of responsive sites that I recently posted. To newbies, responsive designmight sound a bit complicated, but it is actually simpler…

***网Web前端开发规范(初稿)

这几天一直在梳理关于前端方面的开发规范,现在暂时梳理了HTML的开发规范,暂且放置于此! 规范目的: 使开发流程更加规范化文件命名规范:(需审批) 1.项目命名全部采用小写方式, 以下划线分隔. 例:my_project_name 2.目录命名参照项目命名规则: 有复数结构时,要采用复数命名法. 例:scripts, styles, images, data_models 3.HTML,CSS, SCSS,JS文件命名参照项目命名规则. 例:error_report.html 4.一些浏…

arcgis for javascript 自定义infowindow

arcgis 自己的infowindow 太难看了,放在系统中与系统中的风格格格不入,在参考了网上的一些资料后,整理编写了适合自己系统的infowindow,与大家分享. 1.自定义展示效果 2.InfoWindow.js define([ "dojo/Evented", "dojo/parser", "dojo/on", "dojo/_base/declare", "dojo/dom-construct"…

【viewport Meta Tag】的更多相关文章