Typecho的默认主题只在PC端显示,移动设备是不显示搜索框和侧边栏的

修改方法:

打开header.php,将原文的

<div class="site-name col-mb-12 col-9">
<?php if ($this->options->logoUrl): ?>
    <a id="logo" href="<?php $this->options->siteUrl(); ?>">
        <img src="<?php $this->options->logoUrl() ?>" alt="<?php $this->options->title() ?>" />
    </a>
<?php else: ?>
    <a id="logo" href="<?php $this->options->siteUrl(); ?>"><?php $this->options->title() ?></a>
    <p class="description"><?php $this->options->description() ?></p>
<?php endif; ?>
</div>
<div class="site-search col-3 kit-hidden-tb">
    <form id="search" method="post" action="<?php $this->options->siteUrl(); ?>" role="search">
        <label for="s" class="sr-only"><?php _e('搜索关键字'); ?></label>
        <input type="text" id="s" name="s" class="text" placeholder="<?php _e('输入关键字搜索'); ?>" />
        <button type="submit" class="submit"><?php _e('搜索'); ?></button>
    </form>
</div>

修改为

<div class="site-name col-mb-12 col-tb-8 col-9">
<?php if ($this->options->logoUrl): ?>
    <a id="logo" href="<?php $this->options->siteUrl(); ?>">
        <img src="<?php $this->options->logoUrl() ?>" alt="<?php $this->options->title() ?>" />
    </a>
<?php else: ?>
    <a id="logo" href="<?php $this->options->siteUrl(); ?>"><?php $this->options->title() ?></a>
    <p class="description"><?php $this->options->description() ?></p>
<?php endif; ?>
</div>
<div class="col-mb-12 col-tb-3 col-3">
    <div class="site-search col-mb-6 col-tb-12 col-12" style="margin-left:25%;">
        <form id="search" method="post" action="<?php $this->options->siteUrl(); ?>" role="search">
            <label for="s" class="sr-only">搜索关键字</label>
            <input type="text" id="s" name="s" class="text" placeholder="输入关键字搜索"/>
            <button type="submit" class="submit">搜索</button>
        </form>
    </div>
</div>

分析:

将grid.css代码格式化后可以看出

//源代码较长,只写了摘要内容

//无媒体查询,即为默认
col-mb

@media(min-width:768px){
    col-tb
}
@media(min-width:992px){
    col
}
@media(min-width:1200px){
    col-wd
}

@media(max-width:767px) {
    .kit-hidden-mb {
        display: none;
    }
}
@media(max-width:991px) {
    .kit-hidden-tb {
        display: none;
    }
}
@media(max-width:1199px) {
    .kit-hidden {
        display: none;
    }
}

即表示:

宽度小于768px时为默认样式,使用 col-mb-n(n为1-12) 设置宽度。
宽度大于768px,小于992px时,使用 col-tb-n(n为1-12) 设置宽度。
宽度大于992px,小于1200px时,使用 col-n(n为1-12) 设置宽度。
宽度大于1200px时,使用 col-wd-n(n为1-12) 设置宽度。


效果

手机:

微信截图_20220313004618.png

平板:

微信截图_20220313004636.png

标签: none

添加新评论