gpt4 book ai didi

css - 移动和桌面 CSS 文件、cookie 以及两者之间的切换

转载 作者:行者123 更新时间:2023-11-28 18:23:41 26 4
gpt4 key购买 nike

我目前正在使用的网站使用自定义 CMS,并且已经使用拆分 CSS 文件进行移动集成,所以我有:- 桌面.css- 移动.css

有一个 Javascript 可以检测屏幕尺寸并提供适当的 CSS 文件。

用户可以选择在较小的屏幕上查看完整站点,并在较大的屏幕上查看较小的站点,在 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);
}

检测屏幕尺寸并提供 CSS 的 Javascript 是:

<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\" />

我发现的问题是,在 Javascript 启动将用户重定向到移动 CSS 之前,网站必须先启动普通 CSS。

有没有一种简单的方法可以解决此问题,以便用户不必在加载移动 CSS 之前查看完整网站?

提前谢谢大家!

最佳答案

抱歉评论中有错字,应该是媒体查询。例如:

<!-- 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

关于css - 移动和桌面 CSS 文件、cookie 以及两者之间的切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16276528/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com