知乎移动版

使桌面版更接近移动风格
Cài đặt script này ? Cài đặt theo phong cách người dùng ?
Đặt câu hỏi, đăng đánh giá, hoặc báo cáo tập lệnh.
Wrap lines
/* ==UserStyle==
@name           知乎移动版
@version        2025.06.06.04
@namespace      github.com/Labolasya
@description    使桌面版更接近移动风格
@author         Labolasya
@license        MIT
==/UserStyle== */

@-moz-document domain("zhihu.com"),
domain("www.zhihu.com") {

    /* ============ 全局布局 ============ */
    :root {
        --app-width: initial;
    }

    body {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        overflow-x: hidden;
        /* overscroll-behavior-y: contain; 可选 */
    }

    /* ============ 顶部导航栏 ============ */
    .AppHeader {
        min-width: initial;
    }

    .AppHeader > .AppHeader-inner {
        min-width: initial;
        width: initial;
        padding: 0 8px;
    }

    .AppHeader > .AppHeader-inner [aria-label="知乎"],
    .AppHeader > .AppHeader-inner .AppHeader-Tabs,
    .SearchBar-askButton,
    .AppHeader-userInfo > div:has(a[href="https://www.zhihu.com/creator"]) {
        display: none;
    }

    .AppHeader-userInfo {
        margin-left: 16px !important;
    }

    .AppHeader-userInfo button {
        margin-right: 8px;
    }

    /* ============ 首页内容流 ============ */
    .Topstory-container {
        width: initial;
        padding: 0;
    }

    .Topstory-container > :not(.Topstory-mainColumn) {
        display: none;
    }

    .Topstory-container > .Topstory-mainColumn {
        width: 100%;
        box-sizing: border-box;
    }

    /* 内容卡片操作按钮压缩 */
    .ContentItem-actions {
        flex-wrap: wrap;
        gap: 10px;
    }

    .ContentItem-actions > * {
        margin-left: 0;
    }

    .ContentItem-actions > span:first-child {
        display: flex;
        gap: 3px;
    }

    .ContentItem-actions [aria-label="反对"] {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ContentItem-actions > *:nth-child(2) {
        flex-basis: 30%;
        order: 2;
    }

    .ContentItem-actions > button.ContentItem-action:last-child {
        order: 3;
    }

    .ContentItem-actions button:not(:has(.Zi--Comment, .Zi--TriangleUp, .Zi--Heart)) {
        font-size: 0;
    }

    .ContentItem-actions button span {
        line-height: 1;
        font-size: 14px;
    }

    /* ============ 弹窗样式 ============ */
    [style="opacity: 1; transform: none;"] {
        width: 90vw;
        max-width: initial;
    }

    button[aria-label="关闭"] {
        position: fixed;
        z-index: 9999;
        top: 0;
        right: 0;
        padding: 4px;
    }

    /* ============ 问题页面 ============ */
    /* 问题顶部区域 */
    .QuestionHeader-content {
        gap: 8px;
        flex-wrap: wrap;
        padding: 0;
    }

    .QuestionHeader-content > .QuestionHeader-main {
        flex-basis: 100%;
    }

    .QuestionFollowStatus > .NumberBoard {
        margin: 0;
    }

    .QuestionHeader-footer-main {
        gap: 8px;
        flex-wrap: wrap;
    }

    .QuestionHeader-footer-main > * {
        margin-left: 0 !important;
        flex-basis: 100%;
        max-width: 90vw;
    }

    .QuestionHeader-footer-main > .QuestionHeader-actions {
        flex-direction: row-reverse;
    }

    .QuestionHeader-main,
    .QuestionHeader-side,
    .Question-mainColumn {
        width: initial;
        min-width: initial;
        max-width: initial;
    }

    /* 问题主体内容区域 */
    .Question-main {
        margin: 0;
        padding: 0;
    }

    .Question-main > .Question-mainColumn {
        width: 90vw;
        padding: 0 16px;
    }

    .Question-main > .Question-sideColumn {
        display: none;
    }

    /* 富文本链接卡片 */
    .RichText-LinkCardContainer > a {
        margin: 0 !important;
        max-width: 80vw !important;
    }

    /* 作者徽章宽度修正 */
    .AuthorInfo-badgeText {
        width: initial !important;
    }

    figure {
        display: inline-block;
    }

    img {
        width: 100%;
        max-width: 90vw !important;
    }

    /* ============ 个人资料页 ============ */
    .ProfileHeader-main > .UserAvatarEditor {
        max-width: 40vw;
        max-height: 40vw;
    }
    
    .ProfileHeader-content {
        max-width: 40vw;
    }
    .ProfileButtonGroup.ProfileHeader-buttons {
        position: initial;
        margin-top: 8px;
    }
    
    .ProfileHeader-title {
        flex-wrap: wrap;
    }
    
    .ProfileHeader-name {
        flex-basis: 100%;
    }
    .ProfileHeader-headline {
        margin-top: 8px;
    }
    
    .ProfileHeader-contentBody {
        width: initial;
    }
    
    .Profile-main {
        gap: 16px;
        flex-direction: column;
    }

    .Profile-main > .Profile-mainColumn {
        width: 100%;
        flex-basis: 100%;
    }

    .Profile-main > .Profile-sideColumn {
        width: 100%;
        max-width: initial;
        margin: 0;
    }

    /* ============ 专栏页 ============ */
    .Post-content {
        min-width: initial;
    }
    .Post-Row-Content {
        margin: 0;
        flex-direction: column;
        padding: 0;
    }
    .Post-Row-Content-left,
    .Post-Row-Content-right {
        width: 100% !important;
        margin: auto;
    }

    .Recommendations-BlockTitle {
        text-align: center;
    }

    .Recommendations-List {
        flex-direction: column;
        align-items: center;
        button {
            display: none;
        }
    }
    .PostItem {
        width: 330px;
    }
}
Greasy Fork镜像

知乎移动版

赞助商

广告
