viewport | 易学教程

CSS3自适应布局单位 —— vw,vh

阅读更多关于 CSS3自适应布局单位 —— vw,vh

1. 什么是视口？在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。 2. 视口单位vw，vh 视口单位中的“视口”，桌面端指的是浏览器的可视区域(不包括工具栏和按钮的网页浏览器)；移动端指的就是Viewport中的Layout Viewport。根据CSS3规范，视口单位主要包括以下4个： 1. vw：1vw等于视口宽度的1%。 2. vh：1vh等于视口高度的1%。 3. vmin：选取vw和vh中最小的那个。 4. vmax：选取vw和vh中最大的那个。 vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。 3. calc()的使用 calc(expression) 是css3的一个新增的功能，用来指定元素的长度。 calc()能给border、margin、pading、font-size和width等属性设置动态值，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)” calc()使用通用的数学运算规则，但是也提供更智能的功能：使用“+”、“-”、“*” 和

Chrome remembers scroll position

阅读更多关于 Chrome remembers scroll position

问题 I'm running into a problem that's actually a "feature" on Chrome. As most of you might know, Chrome remembers a scroll position that it returns to, whenever you come back to a page. And I kind of have a problem with that. Is there any way to override this without the user noticing? Mees Failed try-outs: ScrollTop on document.ready 回答1: I've checked on chrome, it worked well. Sometimes setTimeout does trick :) <script type="text/javascript"> window.onload=function(){ setTimeout(function(){

How to set viewport meta for iPhone that handles rotation properly?

阅读更多关于 How to set viewport meta for iPhone that handles rotation properly?

So I've been using: <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/> to get my HTML content to display nicely on the iPhone. It works great until the user rotates the device into landscape mode, where the display remains constrained to 320px. Is there a simple way to specify a viewport that changes in response to the user changing the device orientation? Or must I resort to Javascript to handle that? Was just trying to work this out myself, and the solution I came up with was: <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

Android viewport setting “user-scalable=no” breaks width / zoom level of viewport

阅读更多关于 Android viewport setting “user-scalable=no” breaks width / zoom level of viewport

问题 I am working on a web app which has a width of 640px. In the document head I set <meta name="viewport" content = "width=640, user-scalable=no" /> so the content is nicely displayed and stretched horizontally. This works perfectly on iOS but in Android the browser opens the website zoomed in so the user has to double click to zoom out and the entire page. When I change the viewport setting to leave out the user-scalable tag like this: <meta name="viewport" content="width=640" /> the Android

jquery $(window).width() and $(window).height() return different values when viewport has not been resized

阅读更多关于 jquery $(window).width() and $(window).height() return different values when viewport has not been resized

问题 I am writing a site using jquery that repeatedly calls $(window).width() and $(window).height() to position and size elements based on the viewport size. In troubleshooting I discovered that I am getting slightly different viewport size reports in repeated calls to the above jquery functions when the viewport is not resized. Wondering if there is any special case anyone knows of when this happens, or if this is just the way it is. The difference in sizes reported are 20px or less, it appears.

移动端 --- 布局

阅读更多关于移动端 --- 布局

一. viewport 什么是viewport 简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport。如今的浏览器，都会给自己的本身提供一个viewport的默认值，可能是980px，或者是其他值。就以手机来说吧，目前，新版本的手机浏览器，绝大部分是以980px作为默认的viewport值的。我这里对新版本的不同平台下的浏览器做了测试，经过测试，iphone下的默认viewport为980px，安卓下的浏览器，目前主流的最新浏览器（比如chrome，还有很多国产的像qq，uc）的viewport也是980px了。 viewport是用来干什么的 viewport的默认值，一般来说是大于手机屏幕的。这样就可以做到当我们在浏览桌面端网页的时候，可以让桌面端端网页正常显示（我们普通页面设计的时候，一般页面的主区域是以960px来做的，所以980px这个值，可以做到桌面端网页的正常显示）。但是，其实我们手机的屏幕宽度是没有960px的，因此浏览器会出现横向滚动条。同时，即使是基于980的viewport，我们在移动端浏览我们的桌面页面的体验其实也并不好，所以，一般的，我们会专门给浏览器设计一个移动端的页面。

iPad layout scales up when rotating from portrait to landscape

阅读更多关于 iPad layout scales up when rotating from portrait to landscape

问题 I have a added to the "viewport" meta tag "width=device-width,initial-scale=1.0" and on an iPad the page loads up fine in landscape mode, the it switches nicely to portrait and when I rotate it back to landscape it scales the page up and I have to pinch zoom it back to a 1 scale. I can fix this by adding the "maximum-scale=1.0, user-scalable=no" , but I was wondering if there is a way I could fix this without taking away from the user the ability to zoom in the page. If you have any

How do you disable viewport zooming on Mobile Safari?

阅读更多关于 How do you disable viewport zooming on Mobile Safari?

I've tried all three of these to no avail: <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” /> each are different values I found recommended by google searching or SO searching, but none of the 'user-scalable=X' values seem to be working I also tried comma delimiting the values instead of semicolon, no luck. Then I

What is viewport in HTML.

阅读更多关于 What is viewport in HTML.

问题 What is viewport in HTML? Could you give some examples on how to access the viewport details? 回答1: The viewport is the part of the webpage that the user can currently see. The scrollbars move the viewport to show other parts of the page. Follow this article's instructions to get the viewport dimensions in Javascript. if (typeof window.innerWidth != 'undefined') { viewportwidth = window.innerWidth, viewportheight = window.innerHeight } 回答2: I think the ViewPort is just an area to display the

Full webpage and disabled zoom viewport meta tag for all mobile browsers

阅读更多关于 Full webpage and disabled zoom viewport meta tag for all mobile browsers

I want my webpage to be full screen and disable zooming on all mobile devices. With the meta tag: <meta name="viewport" content="width=1165, user-scalable=no"> I am able to do this for iPhone/iPad, but on Android devices the website is zoomed in to about 125%. If I use the tag <meta name="viewport" content="width=max-device-width, user-scalable=no"> I get the opposite result. So then it works on Android but it doesn't work on iPad/iPhone. Unfortunately each browser has it's own implementation of the viewport meta tag. Different combinations will work on different browsers. Android 2.2 :

订阅 viewport