Tag:viewport

  • The basic principle and detailed usage of viewport

    Time:2020-1-14

    1、 Overview of viewport Mobile browsers usually render pages in a virtual window wider than the screen. This virtual window is the viewport. The purpose is to normally display the web pages that are not adapted to the mobile terminal, so that they can be fully displayed to users. Sometimes when we use mobile devices […]

  • Lazy load (2) of belt and show

    Time:2019-12-22

    Reference article: jquery.lazyload use and source code analysis For the basic introduction and use of jQuery lazload plug-in, seeLast article。 Chapter water. -) Overview Let’s take a look at the structure of the code as a whole: (function ($, window, document, undefined) { var $window = $(window); /*Main body of lazyload method*/ $.fn.lazyload = function […]

  • Lazy load (3) of belt and show

    Time:2019-12-21

    Blog address: https://guitong.github.io/blog In the previous section, we analyzed the jQuery lazload source code, including the following paragraph: /*A convenient method is defined in jQuery namespace to determine whether the image is in the scope of container viewport*/ $.belowthefold = function (element, settings) {…} $.rightoffold = function (element, settings) {…} $.abovethetop = function (element, settings) […]

  • Using viewport to define screen CSS in meta tag

    Time:2019-12-7

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”> Width viewport widthHeight viewport heightInitial scale initial scaleMinimum scale the minimum scale that users are allowed to zoom toMaximum scale the maximum scale a user can zoom toUser scalable can users manually scale

  • Viewport control device screen CSS in meta tag

    Time:2019-11-24

    Copy code The code is as follows: <meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”> Width viewport width height viewport heightInitial scale initial scaleMinimum scale the minimum scale that users are allowed to zoom toMaximum scale the maximum scale a user can zoom toUser scalable can users manually scale

  • Mobile horizontal and vertical screen detection

    Time:2019-10-23

    1. Different methods of obtaining the viewport // get visual viewport size (including vertical scroll bar) let iw = window.innerWidth, ih = window.innerHeight; console.log(iw, ih); // get visual viewport size (content area size, including sidebars, window borders, and resizing window borders) let ow = window.outerWidth, oh = window.outerHeight; console.log(ow, oh); // get the ideal viewport […]