Conditions: on pages there are blocks of different widths, given in pixels. You need to add one more block at 100% width.
Problem: If you add a block with width = 100% to an existing block of width, for example, at 1000px , then on devices with a screen width of less than 1000px , the browser is scaled so that the block of 1000px entirely. In this case, a block with width = 100% obtained with a width equal to the physical width of the screen. Those. in numbers - 412x732 screen. Here the block also turns out 412 pixels wide, but not desirable 1000. Visually the block with width = 100% not on all screen. A 1000px - the whole.
If the block is rigidly set to 1000, then of course everything will work out, but the maximum width of the blocks (and their number) on the page is not known - it may be different.
In the example below, two blocks should be the same width. Change the entire existing layout for any properly-kosher version does not work, you can only add any javascript and any css for div2 .
.div1 { width: 1000px; background-color: red; height: 100px; } .div2 { width: 100%; background-color: green; height: 100px; } <html> <head> <meta name="viewport" content="width=device-width" /> </head> <body> <div class="div1">width: 1000px</div> <div class="div2">width: 100%</div> </body> </html> Screenshot of what happens:
