The html page appear small on device, when hit refresh it comes to normal position.
I am building a mobile website and when the page opens on the screen, it is half the size of the device. After hitting refresh, the page appears correctly on the device. The head tag is having the main script which select the css file based on the screen width. The code is as follows:
<head>
<link rel="stylesheet" type="text/css" />
<script type="text/javascript">
if (screen.width >= 480)
开发者_StackOverflow中文版 {
link = document.getElementsByTagName( "link" )[ 0 ];
link.href = "style480.css";
}
</script>
<title>XYZ</title>
</head>
Not sure, but it looks like the browser is not downloading the stylesheet on the first go round because the script doesn't execute until the page is rendered.
Only after refreshing does it note the existence of the css and apply accordingly.
Try instead having a default css already linked and then another to change depending on the screen size.
加载中,请稍侯......
精彩评论