viewport

问题 I am using a scroll trigger from this answer to build a progressbar.js animation that is triggered once the entire progress bar div is in the viewport. The animation works normally with no trigger, it just runs on page load. But I can't make it trigger when the element scrolls into full view. The example code below has a div gap at the top so you can scroll down before the animation starts, although that is obviously the part I cannot get working. function privacyScoreCircle() { //

问题 I'm working at a website(Revogue).I'm trying to disable zoom for mobile phones and it doesn't work.I tried many metaviewports...Please help me(( <meta name="viewport" content="user-scalable=0, initial-scale=1, maximum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport

问题 I am getting the error in Google Page Speed Insights stating: "The page content is too wide for the viewport, forcing the user to scroll horizontally. Size the page content to the viewport to provide a better user experience." "The page content is 378 CSS pixels wide, but the viewport is only 320 CSS pixels wide." I have the viewport set in the header as follows: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> I still have the issue

问题 I'm trying to create a Mapbox map with thousands of points. I want the user to be able to type an address and a div to be filled with information from the closest point to that address. I'm using the mapbox-gl-geocoder control What would be perfect is if I could use something like: geocoder.on('result', function(e) { var features = map.queryRenderedFeatures(e.result.center) }); But queryRenderedFeatures doesn't accept latlong coordinates, it requires viewport coordinates. The next thing I

问题 iam developing a windows phone 8 + cordova project. in this i have a requirement to show some pages in landscape. In portrait the pages are looking fine and the size is correct. but when it comes to landscape the overall design is zoomed in. Iam using this as my viewport style @-ms-viewport { width: device-width; width:350px; user-zoom:fixed; max-zoom:1; min-zoom:1; } and in index.html i used, <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, maximum

问题 I'm trying to get the total number of a given html element's pixels which are visible inside the viewport. This question and accepted answer Can I detect the user viewable area on the browser? were very useful for determining whether the element is in view/out of view/partially in view, but for the partially in view case I need to get the total (vertical x horizontal) number of pixels not obscured by the viewport. I was trying something like this, but the horizontal value is always wrong: var

问题 There are lots of pages discussing vh and vw versus percentage. (I'm running on Chrome btw). In my mind, 100vw should mean the exact size of the browser window no matter whether I expand it or shrink it -- and when I draw a border around a div that's 100vw, IT DOES match that width. HOWEVER, 100vh ALWAYS overflows the bottom of the screen. I've played with: html, body { height: 100%; width: 100%; } and html, body { height: 100vh; width: 100vw; } and when I draw a border around a div that's

问题 time for my first own stackoverflowquestion, since this thing is driving me crazy the whole day now. i borrowed an ipad today to test a website wich comes with additional phone and an tablet-versions. (there's only safari on it) the layout is a comlete static thing with some graphics and they want it 1:1. so i learnd about mobile devices, added a <meta name="viewport" content="width=x" /> and got a perfect version for the phone. but when it comes to the tablet i ran into trouble. the tablet

问题 I'm building a responsive website and I'm having a problem with it which means that when I view it on a mobile, it's automatically zoomed in by a small amount. I can zoom out to view the whole width of the page, but when I click on a link to another page, the new page loads in slightly zoomed in as well (maybe by 10% or so). I've set an appropriate viewport which should deal with the problem: <meta name="viewport" content="width=device-width, initial-scale=1" /> I also have set a minimum

问题 I have been suffering from a bug for sometime: I am doing something like the following: $container.on('touchmove', function(){ $container.trigger( 'lazyload.appear'); }); $img.one( 'lazyload.appear', function(){ var that= this; var $self= $(that); $self.css('background-image', "url('real.path.to.img')" ); }); However, on IOS there seems to be a problem with repainting the background-images, when they are initially outside the viewport. When I drag my finger, until the image is in the viewport