viewport | 易学教程

【前端知识体系】CSS布局知识强化

阅读更多关于【前端知识体系】CSS布局知识强化

1.实现两栏/三栏布局的方法? 表格布局 float + margin布局 inline-block布局 flexbox布局（兼容性的问题） 1.1 基础布局 <style> * { margin: 0; padding: 0; } .layout { margin-top: 10px; } .layout div{ min-height: 100px; } </style> <body>  <section class="layout float"> <style> .layout.float .left { float: left; width: 300px; background-color: #48adff; } .layout.float .main { background-color: #ff4344; } </style> <article class="left-main"> <div class="left"></div> <div class="main"> <h1>浮动两栏布局</h1> <p>两栏布局的中间部分</p> <p>两栏布局的中间部分</p> </div> </article> </section>  <section class="layout absolute">

Mobile Website: Orientation change from portrait to horizontal

阅读更多关于 Mobile Website: Orientation change from portrait to horizontal

I'm developing a mobile website for iPhone and Android browsers. As I was playing around with an Iphone 4 and a HTC Desire I found out that the two devices react differently on orientation change. If I load the website in portrait mode and then rotate the device to horizontal mode, the Iphone zooms closer to the content using the same width (320px). With an Android device, if I rotate it seems that the viewport changes, so there isn't any zooming going on (width >320px), instead the websites gets wider. My current viewport (I already tried setting a fixed width of 320px): <meta name="viewport"

load different views into viewport

阅读更多关于 load different views into viewport

I am using a main viewport. I use the north panel for buttons. When i click on a button i want to load a panel in the center region. I made some views in architect allready. mainviewport Ext.define('MyApp.view.MyViewport', { extend: 'Ext.container.Viewport', layout: { type: 'border' }, initComponent: function() { var me = this; Ext.applyIf(me, { items: [ { xtype: 'container', height: 65, region: 'north', items: [ { xtype: 'button', height: 50, maxHeight: 50, maxWidth: 50, minHeight: 50, minWidth: 50, style: 'margin: 5px;', width: 50, text: 'Home' }, { xtype: 'button', height: 50, maxHeight: 50

移动端的适配方案

阅读更多关于移动端的适配方案

目录移动端的适配方案百分比适配 viewport缩放适配 DPR缩放适配 rem适配 hotcss适配(使用dpr+rem,简单好用) vw/vh适配(为适配而生，最优方案) 移动端的适配方案不同的尺寸的手机设备上，页面相对合理的展示（自适应）或者保持统一效果的等比缩放百分比适配根据父级计算百分比，需要配合其他布局使用 <div class="container"> <div></div> <div></div> <div></div> <div></div> </div> html,body{ width:100%; .container{ width:100%; div{ float:left; width:25%; } } } viewport缩放适配把所有机型的css像素设置成一致的,需要动态设置缩放比公式: 缩放比 = css像素/375 <script> (function(){ //获取CSS像素,需要确保缩放为1(minimum-scale=1,maximum-scale=1) let pageWidth = document.documentElement.clientWidth; let pageWidth = window.innerWidth; let pageWidth = window.screen.width; //求缩放比 var

HTML

阅读更多关于 HTML

1.html5的新特性文件类型声明（<!DOCTYPE>）仅有一型：<!DOCTYPE HTML>。新的解析顺序：不再基于SGML。绘画 canvas; 用于媒介回放的 video 和 audio 元素; 语意化更好的内容元素:article、footer、header、nav、section; 表单控件:calendar、date、time、email、url、search; input元素的新类型：date, email, url等。新的技术: webworker, websocket, Geolocation; 新的属性：ping（用于a与area）, charset（用于meta）, async（用于script）。全域属性：id, tabindex, repeat。新的全域属性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。新应用程序接口: HTML Geolocation HTML Drag and Drop HTML Local Storage HTML Application Cache HTML Web Workers HTML SSE HTML Canvas/WebGL HTML Audio/Video 移除的元素：纯表现的元素：basefont，big

Media Queries min-width not firing correctly in Opera, FF and IE

阅读更多关于 Media Queries min-width not firing correctly in Opera, FF and IE

I use media queries on a page http://test.lovecpokladu.cz/detail-mince?id=2461 like this: @media all and (min-width: 660px) { ... styles for box decoration ... } and use this meta viewport tag: <meta name="viewport" content="width=device-width, initial-scale=1.0"/> When I resize Chrome's window to 660px (measuring just the HTML page, not window borders), styles apply correctly. Styles don't apply in 659px, which is correct. Problem is with Opera, IE and Firefox. The styles apply as soons as width hits about 642px :( I observe these browsers firing min-width sooner at more content even in max

How to do viewport sizing and scaling for cross browser support?

阅读更多关于 How to do viewport sizing and scaling for cross browser support?

Basically what I'm trying to do is get my viewport width the same on all mobile browsers and make sure the user cannot zoom in or out (scale). The mobile browsers that don't seem to support this correctly are: Windows phone 8 IE10 Android native browser Android Firefox browser The following line of code works on all mobile browsers except the one from the company that rejects standards as usual (IE, in this case IE10 Mobile): <meta name="viewport" content="width=620, user-scalable=no" /> I found this question with accepted answer: Viewport for IE10 & 11 desktop, but not mobile After applying

移动端网页开发必须要知道的概念

阅读更多关于移动端网页开发必须要知道的概念

一、viewport PC上的网页宽度一般最小都是1024像素,但是手机屏幕宽度没这么大，浏览器可视区域的尺寸最大也不超过手机屏幕宽度，如果直接显示PC版的网页的话，会挤作一团，排版什么的都会乱掉，怎么办呢？弄一个虚拟的网页显示视窗(viewport)，这个视窗比浏览器可视区域大就可以把PC上的网页显示在手机屏幕上了（移动设备上的浏览器会把自己的viewport设为980或1024），这就是viewport中的第一个概念，layout-viewport。 layout-viewport使得PC网页可以在手机浏览器上显示，但是layout-viewport比浏览器可视区域大，因此浏览器会出现滚动条，这就产生了另一个概念，visual-viewport visual-viewport 的宽度等于浏览器的宽度，让viewport等于浏览器宽度，会自动压缩网页,这样就可以显示PC版的网页又不会出现滚动条了。现在PC版网页在屏幕上能正常显示了，但是用户体验不好，因为压缩得厉害，只能不停的放大页面，看完再缩小，用户体验很太差，很多公司为了解决用户体验问题，会针对手机端开发了专用的H5版本。但是在手机上又存在逻辑分辨率和物理分辨率不同的情况，以iphone为例，从iphone4开始，出现了所谓的高清屏，即物理分辨率与逻辑分辨率不同。物理分辨率与逻辑分辨率的不同，会导致显示效果的不同

jQuery mobile footer or viewport size wrong after android keyboard show

阅读更多关于 jQuery mobile footer or viewport size wrong after android keyboard show

I have the following problem with a jquery mobile webapp. I have a fixed footer for my jquery app, but when the android keyboard opens (i.e. when clicking in the browser bar and manually reloading the page), it seems that the viewport is only from top (below the browser bar) down to the upper edge of the keyboard. Then the page reloads and the height of the viewport keeps this size, so it is way too small when the keyboard hides again. How can I force a resize when the keyboard is hidden again? Thanks a lot for your help. Try putting this meta tag in your header. It might fix your problem:

Scaling div width depending on height

阅读更多关于 Scaling div width depending on height

I want to have a site that is 100% of the height of the browser at all times, with the width scaling with an aspect ratio when the height is changed. I can achieve this using the new vh unit: http://jsbin.com/AmAZaDA/3 ( resize browser height ) <body> <div></div> </body> html, body { height: 100%; width: 100%; margin: 0; } div { height: 100%; width: 130vh; margin: 0 auto; background: #f0f; } However, I worry about fallback for IE8 and Safari, as it this unit is not supported there. Are there any other CSS only methods of achieving this effect? I have a solution that works also with IE8 (using

订阅 viewport