Why can’t a smartphone just shrink down my site and use it "as is"?

Question: Why can’t a smartphone just shrink down my site and use it "as is"?

Answer:

Because the mobile viewport is too narrow to accommodate a desktop-based CSS layout.

A Hands-On Exercise

To illustrate the problem, here's something you can try at home. You will need a newspaper, an empty can of beans, and a can opener.

1. With the can opener, remove the bottom of the can so it resembles a tube.
2. Unfold the paper and place it on the table.
3. Now raise the can to your eyes, and look through the "viewport."
4. This time, magically shrink the newspaper down so it fits within your viewing area, and rotate the paper 90 degrees clockwise.
5. Activate your viewport, as described in Step 3, and try to find something to buy.

Because newspapers and cans come in all different sizes, you might be reading the New York Times through a standard can of string beans, while I'm looking at the same paper (or maybe a tabloid from the checkout aisle) through a big can of refried beans. Then there are the navigational issues to deal with…

Here's an idea. Maybe what you need is a special edition of the paper that's designed for the specific dimensions of your viewport, and I can have another one that's designed for mine.

Sound ridiculous? Maybe not.

(Now you can go back.)