viewport

What does the shrink-to-fit viewport meta attribute do?

由 六眼飞鱼酱① 提交于 2019-12-17 17:21:17
问题 I'm having trouble finding documentation for this. Is it Safari specific? There was a recent bug in iOS 9 (here), the solution to which is adding shrink-to-fit=no to the viewport meta. What does this code do? 回答1: It is Safari specific, at least at time of writing, being introduced in Safari 9.0. From the "What's new in Safari?" documentation for Safari 9.0: Viewport Changes Viewport meta tags using "width=device-width" cause the page to scale down to fit content that overflows the viewport

How to show div when user reach bottom of the page?

由 荒凉一梦 提交于 2019-12-17 16:46:08
问题 When user scrolls to the bottom of the page I want to show some div, with jQuery of course. And if user scrolls back to he top, div fade out. So how to calculate viewport (or whatever is the right name) :) Thanks 回答1: This must get you started: <!doctype html> <html lang="en"> <head> <title>SO question 2768264</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function() { $(window).scroll(function() { if ($('body').height() <= ($(window)

How to show div when user reach bottom of the page?

由 一世执手 提交于 2019-12-17 16:46:05
问题 When user scrolls to the bottom of the page I want to show some div, with jQuery of course. And if user scrolls back to he top, div fade out. So how to calculate viewport (or whatever is the right name) :) Thanks 回答1: This must get you started: <!doctype html> <html lang="en"> <head> <title>SO question 2768264</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function() { $(window).scroll(function() { if ($('body').height() <= ($(window)

What's the point of 'meta viewport user-scalable=no' in the Google Maps API

由 爱⌒轻易说出口 提交于 2019-12-17 15:34:29
问题 I'm using the Google Maps JavaScript API V3 and the official examples always have you include this meta tag: <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> Most of the 3rd-party examples I've seen also do it. I wrote a plugin using it, though, and one of my users told me it's preventing him from being able to zoom in and out on his mobile device. I don't have a mobile device to test with, and none of my searches revealed any helpful information. So, what's the point of

Mobile viewport height after orientation change

由 若如初见. 提交于 2019-12-17 11:44:21
问题 I am attaching a listener to the orientationchange event: window.addEventListener('orientationchange', function () { console.log(window.innerHeight); }); I need to get the height of the document after the orientationchange . However, the event is triggered before the rotation is complete. Therefore, the recorded height reflects the state before the actual orientation change. How do I register an event that would allow me to capture element dimensions after the orientation change has been

Mobile viewport height after orientation change

由 我是研究僧i 提交于 2019-12-17 11:43:31
问题 I am attaching a listener to the orientationchange event: window.addEventListener('orientationchange', function () { console.log(window.innerHeight); }); I need to get the height of the document after the orientationchange . However, the event is triggered before the rotation is complete. Therefore, the recorded height reflects the state before the actual orientation change. How do I register an event that would allow me to capture element dimensions after the orientation change has been

Check if element is between 30% and 60% of the viewport

由 巧了我就是萌 提交于 2019-12-17 07:20:40
问题 I am trying to change the color of <li> elements when they are between 30% and 60% of the viewport. So I have this grid of elements stacking side by side like this: I ran into few plugins like Waypoints, Viewport Checker and few others but nothing good. Any idea? I am using a pretty simple structure : JSFIDDLE HTML <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="author" content=""> <link rel="stylesheet" href="css

Check if element is between 30% and 60% of the viewport

由 孤人 提交于 2019-12-17 07:20:11
问题 I am trying to change the color of <li> elements when they are between 30% and 60% of the viewport. So I have this grid of elements stacking side by side like this: I ran into few plugins like Waypoints, Viewport Checker and few others but nothing good. Any idea? I am using a pretty simple structure : JSFIDDLE HTML <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="author" content=""> <link rel="stylesheet" href="css

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

由 一世执手 提交于 2019-12-17 04:39:42
问题 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? 回答1: Was just trying to work this out myself, and

Find the exact height and width of the viewport in a cross-browser way (no Prototype/jQuery)

由 倾然丶 夕夏残阳落幕 提交于 2019-12-17 02:33:42
问题 I'm trying to find the exact height and width of a browser's viewport, but I suspect that either Mozilla or IE is giving me the wrong number. Here's my method for height: var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; I haven't started on width yet but I'm guessing it's going to be something similar. Is there a more correct way of getting this information? Ideally, I'd like the solution to work with Safari/Chrome/other browsers
订阅 viewport