Sometimes you have a problem and mobile first tailwindcss. It stops working and you can hardly find anything. Everything seems to be normal but seems like you are going crazy.
Make sure you don't forget to add this tag.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
A browser viewport is the area of the window that displays the content of a web page. This is usually not the same size as the rendered page, in which case the browser provides scroll bars that allow the user to scroll and access all the content.
Some mobile and web devices and other screens render pages in a virtual window, or viewport, that is usually wider than the screen the rendered result so that you can see everything at once. Users can then pan and zoom to view different areas of the page. For example, if a mobile screen is 640 wide, the page might be rendered using a 980 virtual viewport, then scaled down to fit the 640 space.
This happens because not all pages are mobile-friendly and break (or at least look bad) when rendered at smaller viewport widths. This virtual viewport is a way to make non-mobile-friendly sites look better on generally narrow-screen devices.
However, this mechanism doesn't work well with pages optimized for screens using queries - for example, if the virtual viewport is 980, media starting at 640 or 480 or less will never be used queries, thereby reducing the effectiveness of such restricted responsive design techniques. The viewport meta tag alleviates the problem of virtual viewports on narrow screen devices.
Viewport Basics
A typical mobile-friendly website contains the following content:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Not all devices are the same width; you should ensure that your pages work well across a variety of screen sizes and orientations.
Comments
Post a Comment