文：毛毛，首发自:maomao.ink，转载请保留此行。

前几天改主题，把我原来的区分大小屏功能给弄没了，今天找了一天才给找回来，赶紧抄笔记下来。

期望改动点有仨：

1. 文章列表分类，大屏展示小屏不展示；
2. 右侧分类列表，大屏默认打开小屏关闭；
3. 列表内容显示字数，大屏100字小屏50字；

但是因为改导航栏，把判断功能实现部分代码删掉了，导致无法判断大小屏（大小屏展示都一样），弄得我很尴尬。今天把所有修改导航栏部分代码全部还原，接下来从最开始讲起。

为实现大小屏展示不同的分类和预览字数，我将index.php的代码修改如下：

<div class="post-wrap">
            <div class="post-meta">
                <a class="author-name" href="<?php $this->author->permalink();?>"><?php $this->author->screenName();?></a>
                <span class="author-name" > | </span>
                <span datetime="<?php $this->date('c'); ?>" itemprop="datePublished"><?php $this->dateword(); ?></span>
                <span><?php _e('<i class="icon icon-write"></i> 字数 '); ?><?php echo art_count($this->cid); ?></span>
            </div>
            <a class="post-title" href="<?php $this->permalink() ?>" target="_blank"><?php  $this->sticky(); ?><?php $this->title(); ?></a>
            <a class="post-abstract" href="<?php $this->permalink() ?>" target="_blank">
                <?php if('mini' == Typecho_Cookie::get('menuSize')){$this->excerpt(100,'...');}else{$this->excerpt(50,'...');}?>
            </a>
            <ul class="post-meta">
                <li class="cat"><?php if('mini' == Typecho_Cookie::get('menuSize')){$this->category(',');}?></li>
                <li><a href="<?php $this->permalink() ?>"><?php _e('<i class="icon icon-eye"></i> ');?> <?php $this->viewsNum(); ?></a></li>
                <li><a href="<?php $this->permalink() ?>#comments"><?php _e('<i class="icon icon-comment"></i> ');?> <?php $this->commentsNum(); ?></a></li>
                <li><?php _e('<i class="icon icon-like"></i> ');?> <?php $this->likesNum(); ?></li>
                <li><?php if($this->isTop){_e('置顶');} ?></li>
            </ul>
        </div>

主要修改点是：

• <?php if('mini' == Typecho_Cookie::get('menuSize')){$this->excerpt(100,'...');}else{$this->excerpt(50,'...');}?>大屏显示100字，小屏显示50字；
• <li class="cat"><?php if('mini' == Typecho_Cookie::get('menuSize')){$this->category(',');}?></li>大屏展示文章所属分类，小屏不展示；

下面是分类列表的实现代码：

<div id="post-index-wrap" class="<?php if('mini' == Typecho_Cookie::get('menuSize')){_e('open');}else{_e('');}?>">
    <div class="post-index-menu"><i class="icon icon-list btn-index-menu" title="<?php _e('我的文集'); ?>"></i> <?php _e('我的文集'); ?></div>
    <div class="post-index-box">
        <?php $this->widget('Widget_Metas_Category_List')->to($categories); ?>
        <?php while($categories->next()): ?>
           <li class="menu-item menu-item-home">
             <a href="<?php $categories->permalink(); ?>" rel="section"><?php $categories->name(); ?></a>
           </li>
        <?php endwhile; ?>
    </div>
</div>

大小屏区分代码如下：

• class="<?php if('mini' == Typecho_Cookie::get('menuSize')){_e('open');}else{_e('');}?>"大屏下设置class="open"表示默认展开，小屏下默认不展示；

这里的大屏是指电脑端，小屏是指手机端

这样就能在手机和电脑分别完成不一样的适配了。

原理剖析：

为什么判断if('mini' == Typecho_Cookie::get('menuSize'))就能实现大小屏切换。

实际上，这依赖于导航栏上面有个伸缩导航栏的按钮：

<a href="#" class="btn btn-default btn-nav-size pull-left hidden-xs"><i class="icon icon-<?php if('mini' == Typecho_Cookie::get('menuSize')){_e('indent');}else{_e('outdent');}?>"></i></a>

这个按钮点击的时候会切换menuSize的状态，在normal与mini之间切换；normal是表示导航栏展开状态，mini表示导航栏收起状态；

还有一个重要因素：上述按钮代码里有个hidden-xs标记，这个标记表示在小屏情况下隐藏按钮，手机上是看不到这个按钮的。也就是说，手机上无法进行切换。切换的js代码如下：

        menuSizeToggle:function(btn){
            var wrap = $('#wrapper');
            var size = '';
            if(wrap.hasClass('mini-nav')){
                btn.find('i').attr('class','icon icon-outdent');
                wrap.removeClass('mini-nav');
                size = 'normal';
            }else{
                btn.find('i').attr('class','icon icon-indent');
                wrap.addClass('mini-nav');
                size = 'mini';
            }
            if(size != jApp.getCookie('menuSize')){
                jApp.setCookie('menuSize',size);
            }
        },

从代码看出，只有切换之后才会拥有mini属性，默认状态既不是normal也不是mini。

而我判断的依据是if('mini' == Typecho_Cookie::get('menuSize'))，小屏下只会走进else。

这就是判断的根源。

menuSize这个字段是存在Cookie里面的，所以只要你打开过网页，并且收起过网页，以后都会保存这个值，直到下一次切换。

以上就是全部内容，祝你成功！！！

我是谁？

• 90后程序媛，写代码，也写软文
• 喜欢阅读，喜欢聆听，喜欢分享
• 热爱挑战各种稀奇古怪的事物（比如这个博客）
• 我是毛毛，感恩遇见你！