登录 注册

希望优化一下手机端的图片显示比例

本贴最后更新于 479 天前，其中的信息可能已经事过境迁

目前的问题：对于尺寸过大的图片，在电脑端对图片设置好固定的宽度比例后（如缩小至 xx% 宽度），在手机端查看时图片会显得过小，因为图片被严格地限制在了 xx% 宽度。如果将宽度调回 100%，在电脑端又会显得过大，如果缩小图片本身的尺寸又会损失清晰度，而且操作非常繁琐。总的来说就是电脑端排版、手机端排版、图片清晰度无法做到兼顾。

希望做出的优化：对手机端专门优化图片的显示宽度，虽然图片在笔记中设定了 xx% 宽度的固有参数，但是为了便于阅读，希望图片在手机端可以突破这个固有参数的限制而又不改变这个固有参数，让图片宽度充满手机屏幕的宽度，尺寸本来就较小的图片除外。

以下为具体案例：

在电脑端编辑笔记时，通常会将尺寸过大的图片缩小到合适的比例（如 33% 宽度），如下图：

image.png

但是在手机端查看这篇笔记时，图片还是被严格缩放至手机屏幕宽度的 33%，这样就会显得非常小，不便于手机阅读。如下图：

image.png

而这张图片在小米社区手机端的原帖上是这样排版的：

https://web.vip.miui.com/page/info/mio/mio/suggestDetail?postId=37941772image.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    23013 引用 • 92566 回帖
11 回帖
3
2
2
2
901 117 16 674 5 7 80

相关帖子

11 回帖
希望优化一下手机端的图片显示比例

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • wenbocn •
    付费者

    .protyle-wysiwyg div[data-node-id] span.img[data-type="img"] img {
    width: 110px;
    }

    这个代码可能会满足你的要求，来自 @iamqiz 大神。

    建议提供一种限制图片插入时默认尺寸的设置 - 链滴 (ld246.com)

    1 回复
  • jxst991059 •
    付费者 作者

    请问这个代码要加到哪里呢？

    1 回复
  • wenbocn •
    付费者

    设置，外观，代码片段，注意每个代码片段右边有一个启用选项，默认是关闭的

    1 回复
  • pth2000 •
    付费者

    最近在编辑多图笔记时有同样的体会，不太方便

  • Vanessa •
    订阅者 付费者 MOD

    这个目前还没想到优化的方案，如果把 33% 在移动端移除，那么用户在移动端设置百分比宽度就无法看到效果。

    2 回复
  • jxst991059 •
    付费者 作者

    感谢提供此代码，但是仍然不够灵活，无法兼顾大图和小图的显示尺寸

    ，这个代码适合在手机上用，但是手机端的设置中没有“代码片段”这个选项。

  • Yylicon • • 1 评论
    订阅者 付费者

    移动端编辑器宽度能否再宽一些，本身手机屏幕比较窄，现在块标挤占位置导致两边空白太多了，阅读体验不是很好

    可以看下对比其他软件手机端，右边是思源，明显阅读面积很窄
    image.png

    1 回复
    1 操作
    Yylicon 在 2023-08-31 17:17:44 更新了该回帖
    左右需要放置块标和滚动条
    Vanessa •
  • jxst991059 • • 1 评论
    付费者 作者

    我也在考虑优化方案，说说我最近的使用感受：

    设置图片的宽度比例主要是用于在电脑端手动优化笔记排版，让电脑端达到最佳排版效果。而也恰恰是因为把电脑端的比例同步到了手机端，才降低了手机端的阅读体验，试想一下，电脑端的屏幕很宽，最少也有 1920 像素，而手机端通常为 1080 像素，1.33K 的屏幕宽 1440 像素，如果手机端仍然执行电脑端的比例，基准宽度绝对值变小了，那么必然导致用户在手机端看到的图片都缩小了，体验肯定不好。所以我认为手机端有必要执行自己的一套图片比例设定，和电脑端互相独立，双轨制，也就是每张图片都带有两个比例参数：电脑端的和手机端的。在电脑端新添加的图片同步到手机端时，图片均以“默认”宽度显示；在手机端添加的图片同步到电脑端时，同理也以“默认”宽度显示。而为了照顾老的使用习惯，手机端也可以保留“以电脑端设置过的比例显示图片”的选项。

    同步就是为了保持一致，这样可能做不到，还是需要重新想一下新的方案
    Vanessa •
  • mdzz2048 •
    订阅者 付费者 恶龙

    你好，这个代码片段也许可以解决你的需求。

    body:has(#sidebar) > #editor .protyle-content > .protyle-wysiwyg {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

    显示效果：

    image.png

    注意移除所有边距后，点击最左侧的块，不会出现块标

    1 回复
    1 操作
    mdzz2048 在 2023-09-02 00:17:22 更新了该回帖
  • Yylicon •
    订阅者 付费者

    感谢大佬，我的好像没生效，这个是只针对手机端吗，不知道是不是手机系统的问题还是啥

    1 回复
  • mdzz2048 •
    订阅者 付费者 恶龙

    只针对手机端

请输入回帖内容 ...
jxst991059
回帖
20
 帖子
26
 积分
282

近期热议

推荐标签 标签

  • DNSPod

    DNSPod 建立于 2006 年 3 月份，是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析，让电信用户访问电信的服务器，网通的用户访问网通的服务器，教育网的用户访问教育网的服务器，达到互联互通的效果。

    6 引用 • 26 回帖 • 517 关注
  • 单点登录

    单点登录（Single Sign On）是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • 生活

    生活是指人类生存过程中的各项活动的总和，范畴较广，一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发，最早发布于 2014 年 9 月。

    58 引用 • 22 回帖
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言，应用广泛。C++ 支持多种编程范式，面向对象编程、泛型编程和过程化编程。

    107 引用 • 153 回帖
  • 智能合约

    智能合约（Smart contract）是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易，这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 2 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起，它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • PWA

    PWA（Progressive Web App）是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术，在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 159 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言，由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码，也可以编译成 JavaScript，方便在没有 JVM 的设备上运行。在 Google I/O 2017 中，Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 63 关注
  • 安装

    你若安好，便是晴天。

    132 引用 • 1184 回帖 • 1 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统，最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统，最初是设计给 iPhone 使用的，后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样，属于类 Unix 的商业操作系统。

    85 引用 • 139 回帖
  • 人工智能

    人工智能（Artificial Intelligence）是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    135 引用 • 190 回帖
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库，强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery，是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 724 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似，也就是用各类命令预先放入到一个文件中，方便一次性执行的一个程序文件，主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大，比用其他编程程序编辑的程序效率更高，因为它使用了 Linux/Unix 下的命令。

    123 引用 • 74 回帖 • 2 关注
  • LeetCode

    LeetCode（力扣）是一个全球极客挚爱的高质量技术成长平台，想要学习和提升专业能力从这里开始，充足技术干货等你来啃，轻松拿下 Dream Offer！

    209 引用 • 72 回帖
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 484 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    7 引用 • 40 回帖
  • wolai

    我来 wolai：不仅仅是未来的云端笔记！

    2 引用 • 14 回帖 • 1 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”，在线用户由 1999 年的 2 人（马化腾和张志东）到现在已经发展到上亿用户了，在线人数超过一亿，是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 44 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的 18 人，于 1999 年在中国杭州创立，他们相信互联网能够创造公平的竞争环境，让小企业通过创新与科技扩展业务，并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 106 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。节点（Nodes）在图中表示数学操作，图中的线（edges）则表示在节点间相互联系的多维数据数组，即张量（tensor）。

    20 引用 • 19 回帖 • 1 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • OpenStack

    OpenStack 是一个云操作系统，通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成，同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 1 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • Gzip

    gzip （GNU zip）是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件，它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

    9 引用 • 12 回帖 • 147 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣，为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 52 关注
  • 笔记

    好记性不如烂笔头。

    308 引用 • 793 回帖

最新标签