viewport – Page 2 – Tarik Billa

scale fit mobile web content using viewport meta tag

August 12, 2023 by Tarik

In the head add this //Include jQuery <meta id=”Viewport” name=”viewport” content=”initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no”> <script type=”text/javascript”> $(function(){ if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width var mw = 480; // min width of site var ratio = ww / mw; //calculate ratio if( ww … Read more

Get viewport height when soft keyboard is on

August 10, 2023 by Tarik

2022 You can now combine a window resize listener with the window.visualViewport.height property (which has a very good compatibility): window.addEventListener(‘resize’, () => { // For the rare legacy browsers that don’t support it if (!window.visualViewport) { return } console.log(window.visualViewport.height) })

HTML5 Boilerplate: Meta viewport and width=device-width

August 2, 2023 by Tarik

It’s not a new standard, it’s how it’s always worked AFAIK. If you set the width to a fixed number of pixels, then rotating portrait to landscape just changes the scale, because the number of virtual pixels remains constant. I’m guessing that adding initial-scale=1 is blocking the scaling as you switch between – that is … Read more

pass element ref to a method in angular2

July 23, 2023 by Tarik

Simply do : Template Side : <div #refEl (click)=’yourFunc(refEl)’> Component Side : yourFunc(el: HTMLElement){ console.log(el); // you can check the output in the console } ———————— OR ————————– Template Side : <div (click)=’yourFunc($event.target)’></div> Component Side (Same as above): WORKING DEMO

How to get the mouse position relative to the window viewport in javascript?

July 20, 2023 by Tarik

Try using event.clientY that should always return the correct value regardless of scrolling https://developer.mozilla.org/en-US/docs/DOM/event.clientY

How to know if a widget is visible within a viewport?

July 16, 2023 by Tarik

https://pub.dev/packages/visibility_detector provides this functionality with its VisibilityDetector widget that can wrap any other Widget and notify when the visible area of the widget changed: VisibilityDetector( key: Key(“unique key”), onVisibilityChanged: (VisibilityInfo info) { debugPrint(“${info.visibleFraction} of my widget is visible”); }, child: MyWidgetToTrack()); )

Find the exact height and width of the viewport in a cross-browser way

July 1, 2023 by Tarik

You might try this: function getViewport() { var viewPortWidth; var viewPortHeight; // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight if (typeof window.innerWidth != ‘undefined’) { viewPortWidth = window.innerWidth, viewPortHeight = window.innerHeight } // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) else if … Read more

Difference between visual viewport and layout viewport?

June 8, 2023 by Tarik

The visual viewport is the part of the page that’s currently shown on-screen. The layout viewport can be considerably wider than the visual viewport, and contains elements that appear and do not appear on the screen. Imagine the layout viewport as being a large image which does not change size or shape. Now imagine you … Read more

div with dynamic min-height based on browser window height

June 7, 2023 by Tarik

Just look for my solution on jsfiddle, it is based on csslayout html, body { margin: 0; padding: 0; height: 100%; /* needed for container min-height */ } div#container { position: relative; /* needed for footer positioning*/ height: auto !important; /* real browsers */ min-height: 100%; /* real browsers */ } div#header { padding: 1em; … Read more

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

June 6, 2023 by Tarik

Unfortunately each browser has it’s own implementation of the viewport meta tag. Different combinations will work on different browsers. Android 2.2: viewport meta tag does not seem to be supported at all. Android 2.3.x/3.x: By setting user-scalable=no you disable the scaling of the viewport meta tag yourself as well. This is probably why your width … Read more