好的,几个星期前我完成了一个网站。为了使其符合移动设备,我使用的是智能手机。这是一部Windows手机,但所有内容都应该显示出来。
从那以后,我得到了一部新手机和一部iPhone。我在网站上使用的javascript无法在iPhone上运行。
我用来分隔样式表
<link rel="stylesheet" type="text/css" media="(max-width: 480px)" href="styleSM.css">
<link rel="stylesheet" type="text/css" media="(min-width: 480px)" href="styleS.css">
我认为一切都在与那些人合作。问题是当我使用这段代码时。我发现它在互联网上的某处,但它确实有用。
<script type="text/javascript">
<!-- viewport script -->
var viewportwidth;
var viewportheight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
// older versions of IE
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
</script>
然后我在动态加载内容的脚本中使用变量。像
$.each(test, function(i, item){
if(viewportwidth =< 480){
do something....
}
if(viewportwidth > 480){
do something else...
}
});
我错过了适用于IPhones的javascript中的内容。因为脚本在笔记本电脑和我的旧手机上运行良好。我真的不知道,也不熟悉手机。
基本上在我自己的代码中我有两个选择,如果视口宽度超过480,将元素属性设置为某个东西,if =或480以下设置属性为其他东西。但是当我使用这些脚本时,它们会根据更大的屏幕尺寸显示