我已经制作了我的网站的移动版本.然而,当加载页面时,首先显示该站点而不应用CSS,并且在第二次(最多)之后它应用CSS并正确地呈现它.此行为在所有浏览器(包括移动浏览器)中都是一致的.
你有什么想法,我怎么能强制浏览器首先加载CSS(其尺寸非常小)然后呈现内容？我已经看到了一些关于将CSS文件包含在脑海之外的东西,但据我所知这是违反规范的,我担心这样的黑客可能会在某些移动浏览器上制造东西.
谢谢！
更新
这是来源
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Albite BOOKS mobile</title>
<Meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
<Meta name="description" content="Free e-books for Java Mobile phones."/>
<Meta name="keywords" content="free ebooks,free books,book reader,albite reader,albite books,java mobile"/>
<Meta name="language" content="en_GB"/>
<Meta name="classification" content="public"/>
<link rel="shortcut icon" href="favicon.ico" />
<Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<link href="/stylesheets/mobile.css?1289644607" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- .... -->
</body>
</html>
解决方法
我相信我找到了一个更好的方法来处理这个…
<head><div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div></head>
然后在上次加载的CSS文件的最后一行放置：
#loadOverlay{display: none;}
这主要是针对自身的问题.加载的第一个可显示的html在CSS加载和处理时在所有内容的顶部放置一个空白画布,加载和处理的最后一个CSS删除画布.从我的测试中,这完全解决了这个问题.
