-1



我的网站有两个 css 苍蝇，第一个在桌面屏幕中查看站点，第二个在 Ipad 屏幕中查看，知道它们具有相同的 HTML 代码，
我的问题：是否有任何代码来检测 Ipad 和强行取适合它的css文件？？

谢谢

编辑部分：
亲爱的thxxx答案，但css效果不再出现，我想我的代码有问题，我所做的是：

在标题的主页中我添加了ss行：

<meta name="viewport" content="width=980" /><br/>
<link href="css/site.css" rel="stylesheet" type="text/css">


在 site.css 里面我编码：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 

{
*
    {
        margin::0;
        padding:0;
    }
    html , body
    {
        margin:0;
        padding:0;
        width:100%;
        font-family:"Trebuchet MS";
        font-size:12px;

    }
    .Wrapper{margin:0 auto;}

    .InnerWrapper{width:100%;
        margin:0; 
        padding-top:140px; 
        float:none; 
        display:block; 
        height:auto;}

    .Header{padding-bottom:0; 
        height:140px;
        background: none repeat scroll 0 0 #FFFFFF;
        z-index: 100000;
        position: fixed;
        color: #000000;
        float: left;
        width: 100%;
        box-shadow:0 -1px 7px 5px #888888;}
}

但这不起作用......你能帮忙吗？

4

4 回答 4

1

您可以为此使用媒体查询。只需将下面的 CSS 代码放在 iPad 文件的顶部以及与该设备相关的所有样式中：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Put your iPad styles here (this covers portrait and landscape modes) */
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Put your iPad styles here (this covers landscape mode)*/
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Put your iPad styles here (this covers portrait mode)*/
}

媒体查询所做的是检查设备宽度以识别它是 iPhone、iPad 还是任何其他移动设备。欲了解更多信息，只需谷歌“媒体查询”。

于 2013-03-31T06:02:11.187 回答
1

使用媒体查询来确定屏幕大小。

电话和 iPod touch：

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />

iPhone 4 和 iPod touch 4G：

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />

平板电脑：

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />
于 2013-03-31T09:41:29.440 回答
0

最好的方法是媒体查询：

纯粹通过 css 检测 iPhone/iPad

仅为 ipad 加载 css 文件

或者用JS或PHP检测USER-AGENT。

于 2013-03-31T06:28:32.223 回答
0

我在我的 asp.net 解决方案中添加了这行代码<header>：

   <% if (Request.UserAgent.ToLower().Contains("ipad"))
    { %>
    <link rel="stylesheet" type="text/css" href="css/siteIpad.css" />

    <% } %>

工作正常，，，，

于 2013-05-07T07:36:32.117 回答