viewport设置

浅谈meta viewport设置移动端自适应

1.viewport 移动设备上的viewport是设备屏幕上用来显示网页的那部分区域,再具体一点就是浏览器上用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域大,也可能比浏览器的可视区域小.在默认情况下,移动设备上的viewport都是大于浏览器可视区域的,这是因为移动设备的分辨率相对于PC来说都比较小,所以为了能在移动设备上正常显示那些为PC浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(也可…

h5里viewport设置

正确设置: <meta name="viewport" content="width=device-width,initial-scale=1.0"> 即窗口的大小是设备物理宽度(分辨率 / devicePixelRatio),并且禁止缩放.两者一起使用.width设置浏览器可视宽度,initial-scale设置可视区域缩放级别.注意中间是逗号分隔.若写成分号则后面的无效. content属性值 : width:可视区域的宽度,值可为数字或关键词dev…

移动端 viewport设置

移动端适配（1）——viewport设置与初始化css

移动web 的viewport设置注意事项的详细解释六一快乐=-_-_

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">  <!--name="viewport":说明当前meta标签是用来设置viewport的属性的,…

移动web--移动屏幕适配-完整的viewport设置

…

viewport原理和使用和设置移动端自适应的方法（移动适应电脑）

viewport原理和使用和设置移动端自适应的方法 HTML中: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放.当然maximum-scale=1.0, user-scalable=0不是必需的,是否…

移动web开发之视口viewport

× 目录 [1]布局视口 [2]视觉视口 [3]理想视口[4]meta标签[5]总结前面的话在CSS标准文档中,视口viewport被称为初始包含块.这个初始包含块是所有CSS百分比宽度推算的根源,它给CSS布局限制了一个最大宽度.在桌面上,视口的宽度和浏览器窗口的宽度一致.而在移动端,视口分为布局视口(layout viewport).视觉视口(visual viewport)和理想视口(ideal viewport) 布局视口移动端设备的问题是,如果使视口的宽度和浏览器窗口宽度一样会导…

解决PhoneGap不支持viewport的几种方法

前几天用phonegap编译GameBuilder+CanTK时,发现HTML里的viewport无效.CanTK根据devicePixelRatio检测设备的DPI,然后用viewport设置正确的分辨率.如果viewport无效,CanTK只能以最低分辨率运行.在网上查了一下, 也没有找到系统的资料,但我知道WebView一定有相应的设置来启用viewport,结合找到的资料和phonegap的源码,终于找到了解决方法,这里总结一下: iOS平台的解决方法:在phonegap的config.…

移动前端开发的viewport总结整理

1.通俗讲移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那块区域,但不是浏览器可视区域.一般来讲,移动设备上的viewport都要大于浏览器的可视区域.移动设备上的浏览器会把默认的viewport设置为980px或1024px,这样会造成浏览器出现横向滚动条. 2.css中的1px不等于设备的1px.分辨率越大,css中1px代表的物理像素就会越多. 3.三个viewpor理论:layout viewport :visual viewpoint,ideal viewp. la…

移动端适配：font-size设置的思考

1. 问题的引出如果html5要适应各种分辨率的移动设备,可以使用rem这样的尺寸单位,针对各个分辨率范围在html上设置font-size的代码: html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and (min-width:376px) and (max-width:414px){html{font-size:…

转: 关于viewport的理解

最近我做了一点儿针对手机的Web开发和相关研究.按说,Web自设计之初,就已经考虑了设备无关性.然而,现实总是不尽如人意. 我们知道大多数网页都是针对桌面显示器开发和测试的,但是手机屏幕通常要比桌面显示器小很多,比如iPhone也就是320px.那么那些网页在手机上如何浏览呢? 一种是把网页缩放到很小,你可以看到整个网页但是看不清字了:或者只看网页的一个局部,然后上下左右移动来看其他部分.现在的手机浏览器把两种模式结合使用.(或许还有第三种——分析网页,将其中内容抽取出来,重组,然后呈现,不过这…

Mobile上的viewport及各种概念澄清贴

device Pixel & CSS Pixel 物理像素指显示设备上的物理像素点,比如HTC G11宽是480px,这的480是用物理像素衡量的. CSS像素的话则指我们写页面时理解的那个像素单位.可以理解为是设备自己做了一层缩放,让2个物理像素代表一个我们css里说的像素,也就是dp(设备独立像素)的概念.行业内有个约定俗成的规范,即一般这个数值是320. 有的很高密度的手机略作了调整. 想知道设备的物理像素的话,一般去取 screen.width 就可以. 但苹果只会给你dp的数值,也就是…

html_头部<meta>设置

<!DOCTYPE html> : 定义HTML的规则类型:浏览器兼容性最好 <!DOCTYPE html><html> <head>   <meta charset="UTF-8"> <meta http-equiv="content-type" content="t…

viewport的故事（二）

挑重点的翻译自原文 https://www.quirksmode.org/mobile/viewports2.html 在这一页我们将聊一聊移动端的浏览器. 移动端的问题最明显的问题就是尺寸,比PC端小很多,要么整体缩小,那么文字几乎小到认不出来了,要么就只能看一部分. 所以我们要让网站在小屏幕也能很好的展现. 最重要的问题集中在CSS上,尤其是视口的尺寸,如果把PC的一比一放到移动端上,肯定是不起作用的,甚至是有点可怕. 你的布局将会被挤压变形. 一种方式是为移动浏览…

常见手机的设备分辨率、viewport和devicePixelRatio

常见手机的设备分辨率和viewport分辨率,及其1rem的大小(以vmin为单位) 常见的devicePixelRatio是1, 1.325, 1.5, 2, 2.4, 3. (具体见下面的表格,从Chrome Emulator中导出的). Brand Device Resolution Pixel Ratio Amazon Kindle Fire 1024x600 1 Amazon Kindle Fire HD 7" 1280x800 1.5 Amazon Kindle Fire HD 8…

viewport其实没那么难理解

在学习移动端布局的时候,你肯定听说过"viewport"这个词,然后去问度娘或谷歌.你会惊奇的发现,这个viewport不简单,居然有那么多兄弟——layout viewport.visual viewport.ideal viewport.这些都是什么鬼,然后就硬着头皮去发现他们的不同,找了很多资料,很想搞懂他们,最后可能是越看越懵逼,或者就豁然开朗的懂了(我是觉得自己豁然开朗的懂了,所以才写博客记录一下感想,不对之处欢迎来喷...).虽然自己也知道,移动端开发入门没那么难,一句代码…

译——meta viewport

此文翻译PPK大神的——meta viewport. 主要讲到了第三种viewport——ideal viewport,以及使用meta viewport 设置移动浏览器的视口. the meta viewport tag <meta name="viewport" ....>包含了浏览器对于viewport和缩放的各种指令.尤其是,它允许web开发者设置layout viewport的宽度,从而直接影响CSS的声明的计算结果,比如width:20%. 具体语法如下: &l…

视口viewport与单位rem的本质

结论: 视口viewport的设置是为了让字的显示在不同的屏幕下保持一致. 单位rem的使用是为了让页面中的布局元素的比例在不同的屏幕下显示的比例保持一致. 现象: 我们看电脑时候的网页的时候的字体大小假如是font-size:20px,但是一换到手机上的时候显示字体就会变得过小,这是因为viewport的关系. viewport概念:决定一个屏幕能够显示的最大布局宽度,如果一个ipone6手机的可视视图为375像素,但让它的布局宽度以960px去显示就会适当的缩小整体布局来容纳可视视图,也就是…

移动端布局基础viewport

划重点手机屏幕相对着桌面浏览器小,传统网页的设计在手机上体验糟糕 Apple 在移动版 Safari 中定义了 viewport meta 标签(如果没记错最早提出的话),用于创建一个虚拟窗口(layout viewport),这个虚拟窗口的分辨率接近于桌面显示器,Apple将其定义为980px.然后将虚拟窗口映射到移动设备的屏幕上,按比例缩放并重新渲染网页. 虚拟窗口layout viewport 移动浏览器默认情况下把 viewport 设置为一个比较宽的值(防止太窄而在可视区域中显示错乱…

viewport的深入调研

1.viewport概念:viewport就是设备的屏幕上能用来显示我们的网页的那一块区域. viewport的默认值980px或1024px等,以下是浏览器的默认viewport宽度 2.css中的1px devicePixelRatio = 物理像素 / 独立像素 css中的px是设备的独立像素,分辨率约到,1px代表的物理像素越大,devicePixelRatio越大,所以在1080*1920这样的设备上,默认情况下div的宽度设计为300ox(视devicePixelRatio的值而定)…

【viewport设置】的更多相关文章