html - Fluid scaling webpage not scaling as expected on Mobile -


i have created webpage scales moderately on desktop, content percentage of window height or width. don't understand why webpage isn't scaling size of phone screen? here website i've put on hosting site can test on iphone:

http://henryneilson.comli.com/test/index.html

html can seen on link

css important things is:

@charset "utf-8"; body { overflow-x: hidden; overflow-y: hidden; text-align: center; margin: 0px; height: 100vh; top: 0px; } #fsbg { width: 177.77vh; height: 100%; min-width: 400px; min-height: 225px; margin-left: 50%; -webkit-transform: translatex(-50%); -ms-transform: translatex(-50%); transform: translatex(-50%); } #backgrouddiv { height: 100%; text-align: center; display: block; background-color: #161619; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 3000px; position: fixed; left: 50%; -webkit-transform: translatex(-50%); -ms-transform: translatex(-50%); transform: translatex(-50%); z-index: -100; } .titletext { color: #fff; text-shadow: 0px 6px 8px rgba(0, 0, 0, 1); font-size: 5vh; text-align: center; position: absolute; top: -3.7vh; left: 2%; z-index: 10; font-family: source-sans-pro; font-style: normal; font-weight: 100; } .titlebox { width: 100%; height: 7vh; display: block; background-color: #161619; margin: auto; top: 0px; left 0px; position: absolute; z-index: 10; } 

scaling browser same resolution iphone not show iphone shows (i want iphone show desktop shows), missing obvious?

many thanks

h

try adding line in html head :

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

Comments

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -