Question 43391 in Html Question posted in
Some basic documentation can be found here.

Why meta name="viewport" tag is not used by big brands like Amazon, Zomato, Swiggy? – Html

I went to websites like Amazon, Zomato, and Swiggy when I opened the developer tool I realized they are not using <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">.

If I load their website in desktop mode and then I decrease the screen width using the dev tool, the layout does not change (as the viewport tag is not added). I found that their layout type is based on the initial loading width of the screen.

How they are achieving this? Suggest any correct method (industry standard) to do this in React and what is the benefit of this?

Thanks in advance.

Tried to find it by myself but there is not a single article present about this.

Tags:

4

Answers


  1. 0

    Google also does this as well in google.com.
    They use the User Agent String of the device and serve a different website
    depending on its value.

    You can test that yourself using the browser devtools.

    First open devtools with Ctrl + Shift + I or F12,
    then click the 3 dots -> More tools -> Network conditions.

    Now you will see the tab Network conditions.

    enter image description here

    You can now use your custom User Agent String or select one of the provided there.

    enter image description here

    If you select a mobile User Agent and then reload,
    the website will change to the mobile version.

    Login or Signup to reply.
  2. 0

    I check it and I find out something. the meta tag appears if it’s on a phone or the size of the screen is like a phone. so do this resize the page size then refresh the page then check the meta element.
    enter image description here

    Login or Signup to reply.
  3. 0

    There could be several reasons why some websites do not use the meta name="viewport" tag, such as:

    • The website may have been designed specifically for desktop users and may not be optimised for mobile devices.
    • The website may have been developed before the widespread adoption of mobile devices and responsive web design.
    • The website may use a different approach to handle the display of web pages on mobile devices, such as adaptive design or separate mobile sites.

    However, the fact that some big brands like Amazon, Zomato, and Swiggy do not use it in their websites does not necessarily mean that it is not important or that it should not be used.

    It is worth noting that the absence of the meta name="viewport" tag may lead to issues with the display of web pages on mobile devices, such as content not fitting on the screen, text being too small or too large, and the need for users to zoom in or out to read the content. (as you have already witnessed)

    Login or Signup to reply.
  4. 0

    The meta tag adds to the head whenever we need it.
    To do it in React project, you can use useEffect in the App file because we need that useEffect to run every time someone opens the website.

    function App() {
  useEffect(() => {
    const meta = document.createElement('meta');
    meta.setAttribute('name', 'viewport');
    meta.setAttribute('content', 'width=device-width, initial-scale=1.0');
    document.head.appendChild(meta);
  }, []);

    or you can use the Helmet package.

    <Helmet>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</Helmet>

    you can check if the viewport is smaller than something like 765px then the device is a Phone.

    if(window.innerWidth < 765){...}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search