How to stop shrinking mobile web and start scaling instead?

I have standard PC web + mobile web. Using:

<meta name=viewport content="width=device-width, initial-scale=1">
@media (min-width: 1023px) { }
@media (max-width: 1022px) { }

But this website contains object that is 480px wide. So once the shrinking mobile web reaches 480px and under I would like to lock shrinking. And start scaling the screen instead. So the 480px website is 100% of the screen without overflowing even on the smaller devices.

How to do it?

 

Hi vybrano.
Are you talking about about following CSS style:

element{
     min-width: 480px;
}

Code (CSS):

 

That will set minimal width of the web to 480px. Which is good.

But now I have to tell the mobile browser to start un-zooming itself. Since on 320px mobile - 480px web would overflow out of screen.

 

Umm, I don't have any ideas to do that.
But perhaps allowing it to overflow is better than scaling whole screen down
as the latter may disable users to read tiny texts?

 

1) if you're thinking in pixels, PARTICULARLY for your media queries, you're not thinking. If you're using proper dynamic/elastic design your media queries are broken... and if you're not using dynamic/elastic design (aka working in EM) you're flipping the bird at usability and accessibility.

2) If you're writing media queries for BOTH directions, you're also not doing anything right. Write it for one of the other first (I prefer desktop first for various reasons, considering "mobile first" to be feeble-minded) and then override the style with CSS as you shrink the page when/where needed.

That you're even THINKING of something in terms of it being 480px is broken/flawed/nonsensical.

Though if one were crapping on the Internet with something at 480px, and you want it to shrink below that, that's max-width's job.

width:100%;
max-width:480px;

Code (markup):

Max width overrides width, so what happens is it's 480px unless the parent container is smaller than that, in which case the element will size to the parent container.

But unless that's a raster image, you shouldn't even be using or thinking in PX in the first place, you should be using EM so it's dynamic/elastic for users with accessibility needs.

 

It's a 480px wide ad unit that I can't change, like and Adsense ad unit, but not responsive. And I have to work around that. And somehow display that on PC + mobile version.

 

Well, then you might be right and properly screwed... I'd consider hiding it at that point.

Most advertisers have multiple size adverts you can choose from. Some -- like adsense -- even include code to automatically pick one based on the width of the container it's in. Doesn't resize with the window, but it would at least fit on page load.

Do you have ANY option for other advertisements to use? If so, use a script to set up or pick the correct one for the size.