手機和桌面CSS文件，餅乾和兩者之間的切換

我目前正在使用的網站使用的是自定義CMS，並且已經使用拆分CSS文件進行移動集成，所以我有： - desktop.css - mobile.css手機和桌面CSS文件，餅乾和兩者之間的切換

有檢測屏幕尺寸和提供相應的CSS文件中的JavaScript。

用戶可以查看較小的屏幕上完整的網站，並查看較小的網站在大屏幕上，在PHP中設置如下的cookie的選項：

$mob = '?setmob'; 
$mob_len = strlen($mob); 
$self_end = substr($self, strlen($self) - $mob_len); 
if($self_end == $mob){ 
$settomobile = 1; 
} 
else{ 

$full = '?setfull'; 
$full_len = strlen($full); 
$full_end = substr($self, strlen($self) - $full_len); 
if($full_end == $full){ 
$settofull = 1; 
} 
} 

if($settomobile == 1) 
{ 
    setcookie("viewing", "", time()-3600); 
    setcookie("viewing", "mobile", time()+63113851); 
} 

if($settofull == 1) 
{ 
    setcookie("viewing", "", time()-3600); 
    setcookie("viewing", "desktop", time()+63113851); 
}

檢測屏幕尺寸的JavaScript服務於CSS是：

<script type=\"text/javascript\"> 
function adjustStyle(width) { 
width = parseInt(width); 
if (width < 750) { 
$(\"#size-stylesheet\").attr(\"href\", \"/mobile.css\");"; 
$mob = "Yes"; 
$top_contents .= "} else { 
$(\"#size-stylesheet\").attr(\"href\", \"/$css_name.css\"); 

} 

} 

function setToMobile() { 
var width = 200; 
if (width < 750) { 
$(\"#size-stylesheet\").attr(\"href\", \"/mobile.css\");"; 
$mob = "Yes"; 
$top_contents .= "} else { 
$(\"#size-stylesheet\").attr(\"href\", \"/$css_name.css\"); 
} 
} 

function setToDesktop() { 
var width = 1000; 
if (width < 750) { 
$(\"#size-stylesheet\").attr(\"href\", \"/mobile.css\");"; 
$mob = "Yes"; 
$top_contents .= "} else { 
$(\"#size-stylesheet\").attr(\"href\", \"/$css_name.css\"); 

} 
} 

$(function() {"; 
if(isset($_COOKIE['viewing']) || $settofull || $settomobile){ 
$view = $_COOKIE['viewing']; 
if(($view == 'mobile' || $settomobile == 1) && !$settofull){ 
$top_contents .= "setToMobile();"; 
} 
elseif(($view == 'desktop' || $settofull == 1) && !$settomobile){ 
$top_contents .= "setToDesktop();"; 
} 
} 
else{ 

$top_contents .= " adjustStyle(screen.width); 
";} 
$top_contents .=" 
});   </script>"; 
} 

$top_contents = $top_contents . "<link rel=\"stylesheet\" type=\"text/css\" href=\"/admin/css/$css_name.css\" id=\"size-stylesheet\" title=\"default\" />

我發現的問題是，該網站有先啓動正常的CSS，JavaScript的踢在將用戶重定向到移動CSS之前。

有一個簡單的辦法可以解決這個問題，使用戶不必在移動CSS加載之前看到完整的網站？

在此先感謝你們！

來源

2013-04-29 steveyb

您可以使用移動查詢。 – Raptor 2013-04-29 10:53:00

你是什麼意思的移動查詢？ – steveyb 2013-04-29 12:35:27

應該是**媒體查詢**。看到我的答案 – Raptor 2013-04-30 02:28:15

對不起錯字的意見，應該是媒體查詢。例如：

<!-- CSS media query on a link element --> 
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> 

<!-- CSS media query within a style sheet --> 
<style> 
@media (max-width: 600px) { 
    .facet_sidebar { 
    display: none; 
    } 
} 
</style>

請參閱下面的參考鏈接中的更多示例。

參考：Media Queries in MDN

來源

2013-04-30 02:15:56 Raptor

我試過使用媒體查詢，但他們阻止用戶能夠選擇自己的查看選項，這是問題 - 我知道有移動用戶很樂意查看完整站點並縮放和平移，以及我知道有些平板電腦用戶更喜歡在3G上使用簡單的移動版本，而不是使用完整網站（這對平板電腦友好）！我無法找到使用媒體查詢並允許用戶點擊的方式，這就是爲什麼使用Javascript以及cookie來記住設置。是否有任何其他方式來解決desktop.css首先加載的問題？ – steveyb 2013-05-06 22:41:39

試試這個：http：//yepnopejs.com/。這有條件地加載你想要的，以及媒體查詢和JS。 – Raptor 2013-05-07 03:12:08

手機和桌面CSS文件，餅乾和兩者之間的切換

回答

相關問題