2012-12-19 68 views
1

我們正在使用以下HTML元標記和樣式查詢來允許我們定位iPad/Safari瀏覽器(與iPad相比,iPad的一些小變化/ Linux瀏覽器):用於iPad/Safari的CSS正在被小屏幕筆記本電腦使用

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="style/tablet.css" /> 

但tablet.css文件也被較小的筆記本電腦(即那些擁有小於1,024像素)裝 - 也似乎在更大屏幕上放大時發揮作用,太。

使用設備寬度並不是辨別實際設備/瀏覽器的好方法,但是我在互聯網上搜索的所有人都表示這是最好的方法。

有沒有其他辦法?

回答

2

你將不得不恢復到JavaScript來此

您既可以使用Modernizr的檢測支持觸摸事件

http://modernizr.github.com/Modernizr/touch.html

Modernizr的將一個類添加到<html>標記,以便您可以針對觸摸支持設備相當容易。

或者如果您想獲得更高的準確性,請使用javascript檢測用戶代理,但需要定期更新更新和新的平板電腦操作系統版本。

+0

我認爲modernizr觸控測試將是一條可行的路線 - 混合顯示屏和屏幕尺寸將幫助我們針對平板電腦和手機進行適應性調整。謝謝。 – HorusKol

0

讓您@media查詢更多一點的細晶粒將有助於雜草出不需要的設備/更好的瀏覽器:

<link rel="stylesheet" media="only screen and (max-device-width: 1024px) and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 2)" href="style/tablet.css" /> 

使用-webkit-min-device-pixel-ratio:orientation是要比屏幕尺寸更具體到iPad /電話。

+0

當ipad在橫向時怎麼樣? – HorusKol

+0

僅需要定位就能消除所有臺式機/筆記本電腦瀏覽器,因爲它們不具備該功能。像素比率2是特定於視網膜顯示器 – Dawson

+0

我的目標實質上縮小了窗口,使其在99%的時間內如果有什麼進入,我可以認爲它是一個智能設備。 Apple的CSS參考:https://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW1 – Dawson

相關問題