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
Post a Comment