viewport | 易学教程

HTML5 Canvas 100% Width Height of Viewport?

阅读更多关于 HTML5 Canvas 100% Width Height of Viewport?

I am trying to create a canvas element that takes up 100% of the width and height of the viewport. You can see in my example here that is occurring, however it is adding scroll bars in both Chrome and FireFox. How can I prevent the extra scroll bars and just provide exactly the width and height of the window to be the size of the canvas? In order to make the canvas full screen width and height always, meaning even when the browser is resized, you need to run your draw loop within a function that resizes the canvas to the window.innerHeight and window.innerWidth. Example: http://jsfiddle.net

jquery trigger function when element is in viewport

阅读更多关于 jquery trigger function when element is in viewport

问题 I\'d like to trigger an event when jquery.localscroll reaches a certain point of the document, a div. Lets say we\'re scrolling vertically from the top div to the third. When it gets there, then the action schould trigger. 回答1: jQuery Waypoints plugin http://imakewebthings.github.com/jquery-waypoints/ should do the trick UPDATE <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Waypoints Plugin - Test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery

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

移动WEB开发笔记

阅读更多关于移动WEB开发笔记

vertical-align: middle;设置图片居中移动WEB开发视口viewport（显示网页的屏幕区域）布局视口 layout viewport 字太小，手动缩放网页视觉视口 visual viewport 左右滑动看理想视口 ideal viewport 理想视口 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> 物理像素 /物理像素比（DPR）物理像素：屏幕显示的最小颗粒屏幕分辨率物理像素比：1px能显示的物理像素点的个数背景缩放background-size background-size：宽度高度； background-size：宽度；高度等比缩放 background-size：百分比；相对父盒子来说 background-size：contain；一个边顶满盒子，就不在缩放，可能留白/等比缩放 background-size：cover；两个边全部顶满，完全覆盖盒子，可能显示不全/等比缩放 css3移动端盒子模型 box-sizing: border-box; padding 和border不会撑开盒子清除高亮： tap

What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?

阅读更多关于 What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?

问题 I was going through the source code of a website and found this piece of code. <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0\"> I want to know what this initial scale, user-scalable, minimum-scale, maximum-scale are and what does those values mean? And also tell me what all values they accepts. 回答1: They are viewport meta tags, and is most applicable on mobile browsers. width=device-width This means, we are

移动端适配iPhoneX的方法

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

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. 回答1: Unfortunately each browser has it's own

Using jQuery To Get Size of Viewport

阅读更多关于 Using jQuery To Get Size of Viewport

问题 How do I use jQuery to determine the size of the browser viewport, and to redetect this if the page is resized? I need to make an IFRAME size into this space (coming in a little on each margin). For those who don\'t know, the browser viewport is not the size of the document/page. It is the visible size of your window before the scroll. 回答1: To get the width and height of the viewport: var viewportWidth = $(window).width(); var viewportHeight = $(window).height(); resize event of the page: $

Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers

阅读更多关于 Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers

I have a website here . Viewed in a desktop browser, the black menu bar properly extends only to edge of the window, since the body has overflow-x:hidden . In any mobile browser, whether Android or iOS, the black menu bar displays its full width, which brings whitespace on the right of the page. As far as I can tell, this whitespace isn't even a part of the html or body tags. Even if I set the viewport to a specific width in the <head> : <meta name="viewport" content="width=1100, initial-scale=1"> The site expands to the 1100px but still has the whitespace beyond the 1100. What am I missing?

Can I change the viewport meta tag in mobile safari on the fly?

阅读更多关于 Can I change the viewport meta tag in mobile safari on the fly?

问题 I have an AJAX app built for mobile Safari browser that needs to display different types of content. For some content, I need user-scalable=1 and for other ones, I need user-scalable=0 . Is there a way to modify the value of the content attribute without refreshing the page? <meta name=\"viewport\" content=\"width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;\" /> 回答1: I realize this is a little old, but, yes it can be done. Some javascript to get you started: viewport