Question: I have this simple HTML generated from React

```
<!doctype html>
<html><head><title data-react-helmet="true"></title><style type="text/css" data-styled-components="" data-styled-components-is-local="true"></style></head><body><div id="app"><div data-reactroot="">Hello</div></div></body></html>

```

When I open it in Chrome with mobile view, the page dimension is bigger than screen size. In this example, the iPhone 5 dimension is 320x568 but my page width is already 980px. There is no CSS used on the 

[![enter image description here](https://i.stack.imgur.com/uY2fK.png)](https://i.stack.imgur.com/uY2fK.png)

This forces me to use bigger font size which looks normal on that page but becomes really big on desktop. How the page size can be bigger than screen size? How's that happen?

Answer: 
Found the solution [here](https://stackoverflow.com/questions/5582046/mobile-website-html-element-too-wide), simply adding meta tag for viewport

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

```
There are pages in the website that require reworking, such as converting everything to a single vertical column for mobile screens. In the React Native EditScreenInfo title\_uri, I added a query string: mob=yes. The value isn't important, but the server code uses it to determine if it's called from a mobile device. So the server code determines which layout is to be used. I also used JavaScript to make the text as big as possible in the various tags for mobile.