viewport

Trigger animation when div element appears in viewport

霸气de小男生 提交于 2019-12-11 16:49:38
问题 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() { //

My meta viewport doesn't work

自古美人都是妖i 提交于 2019-12-11 16:20:58
问题 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

Page Speed Insights - Size Content to Viewport?

谁都会走 提交于 2019-12-11 13:17:53
问题 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

How can I query the feature that's closest to the geocode result in Mapbox?

纵然是瞬间 提交于 2019-12-11 12:08:49
问题 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

Windows Phone 8 Viewport issue

穿精又带淫゛_ 提交于 2019-12-11 11:09:24
问题 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

Get the number of an element's pixels which are inside the viewport

被刻印的时光 ゝ 提交于 2019-12-11 10:38:43
问题 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

100vh and 100vw compared to the current size of the browser window

百般思念 提交于 2019-12-11 09:51:18
问题 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

how to get orientation:portrait mode with meta viewport with a fixed height

孤街醉人 提交于 2019-12-11 09:27:16
问题 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

Why is CSS min-width causing my responsive site to be zoomed in on a mobile?

心已入冬 提交于 2019-12-11 08:15:49
问题 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

IOS iphone 4s not repainting dynamic images that are initially outside the viewport

谁都会走 提交于 2019-12-11 05:46:06
问题 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