使用适用于 Ipad 的新 CSS 将网站定向到 Ipad答案

【问题标题】：Direct the website to the Ipad with new css suitable for Ipad使用适用于 Ipad 的新 CSS 将网站定向到 Ipad
【发布时间】：2013-03-31 05:55:38
【问题描述】：

我的网站有两个 css 苍蝇第一个在桌面屏幕中查看该站点，第二个在 Ipad 屏幕中查看它，知道它们具有相同的 HTML 代码，，
我的问：有没有什么代码可以检测到Ipad并强制获取适合它的css文件？？

谢谢

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

在标题的主页中，我添加了论文行：

<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;}
}

但这行不通……你能帮忙吗！！

【问题讨论】：

你试过使用css @media 和
已经在标题中添加了这个，但没有尝试媒体查询
Kev 和 ricardohdz 的解决方案都是有效的 - 使用媒体查询而不是用户代理字符串的一个巨大优势是，这些样式可以被具有相同或相似分辨率的 Android 或 Windows 8 平板电脑使用。为此，尽可能使用具有相对单位（例如百分比）的灵活布局。
我的 2 美分在这里。我总是发现人们谈论支持 iPad、iPhone 等是错误的，而正确的方法是研究如何支持不同的屏幕尺寸。

标签： asp.net html css ipad web

【解决方案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 还是任何其他移动设备。欲了解更多信息，只需谷歌“媒体查询”。

【讨论】：

亲爱的 thxxx 的答案，但 css 效果不再出现，我想我的代码有问题，我所做的是：在标题的主页中，我添加了这些行：
尝试缩小屏幕上的视口。通过调整窗口大小并查看样式来做到这一点。

【解决方案2】：

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

手机和 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" />

iPad：

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

【讨论】：

thxxx 为答案，但css效果不再出现我不知道为什么！！,,

【解决方案3】：

最好的方法是媒体查询：

Detect iPhone/iPad purely by css

Load css file for ipad only

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

【讨论】：

【解决方案4】：

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

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

    <% } %>

一切正常，，，，

【讨论】：