如何在CSS/JS中设置真正和词典软件中一致的完美网页缩放？

starmars · 发表于 2020-6-12 19:41:48

以下都是在电脑版欧路和GOLDENDICT下讨论。

词库经常出现默认字体大小不符合自己口味的情况。此时只要按住ctrl键滚动鼠标滚轮即可缩放大小。然而，如果同时打开多部词典，电脑版词典软件无法做到仅缩放某一部词典而只能所有打开的统一缩放。如果遇到同时打开的词库默认大小不统一想每一部词典都调到合适大小就无解了。

于是想到了单独调节每部词库的默认大小。要想看懂词库的CSS也非易事，好在有一个万能方法调节：
在CSS最后加上如下命令可以缩放网页：
body {
-webkit-transform: scale(1.5);
-webkit-transform-origin: 0 0;
}

遗憾的是它的效果和前述的ctrl+鼠标滚轮并非完全一样，如果放大到一定程度水平方向会溢出屏幕而出现滚动条导致版面稍有破坏，而ctrl+鼠标滚轮无此现象。

既然词典软件可以通过ctrl+鼠标滚轮达到完美的缩放，说明它有这个能力只是我们不知道怎么让它去做这件事。难道就没有办法在CSS或者JS,JQUERY里命令它去做和ctrl+鼠标滚轮完全相同的事情吗？

喬治兄 · 发表于 2020-6-13 02:23:53

本帖最后由喬治兄于 2020-6-13 10:01 编辑

仁兄此問題頗具深度，雖無法解您的問題卻觸發其它的想法，因看到您是用 --webket--這應該是 chrome , Safari  , Opera 的 css or js ，引起了幾個疑問，歐路能解晰不同瀏覽器的標簽嗎？但看您所描述的似乎又沒問題可以按您的參數來放大字体
只是一個疑問，若歐路在不需宣告之下的環境可以解晰 chrome , Safari  , Opera 的標簽，那為何曾經試過的 clip-path 卻解晰不出來，雖然此疑問並不涉入您的問題，只是個人曾經碰到的問題上的疑問，因若是可行，是否意謂是否在@media或哪個區域內宣告browser的順位便可以解晰各別不同的brower 標簽不支持的窘況，似乎有看過類似的宣告，一時卻又找不到是否有此功能可以擺脫以lE為內核的browser解晰mdict格式的方法，仁兄若知道如何解決此難題，可否告知，謝謝

也就是說仁兄的 webkit 應該是不起作用的
因 mdict 以lE為內核
若 webkit 起作用則下列應該是起作用的
clip-path 以lE為內核是無法解析 , 但 webkit 的 browser 是可以的
但實驗結果是 mdict 無法解析 webkit 的
取的圖像區域面積依樣是錯誤的
歐路內核應該也是 IE 實驗結果圖像區域面積依樣是錯誤的

[求助] 請賜教: 有關 css clip-path 的疑惑
https://www.pdawiki.com/forum/thread-36172-1-1.html

aberration
<b>aberration</b><br>
<style> img { clip-path: inset( 7.77% 0 74.17% 50% ); margin-top: -7.77%; margin-left: -50%} </style>
<img src="0002.png" width="100%">
</>

aberration
<b>aberration</b><br>
<style> img { -webkit-clip-path: inset( 7.77% 0 74.17% 50% ); margin-top: -7.77%; margin-left: -50%} </style>
<img src="0002.png" width="100%">
</>

Last  idle  兄的工具可以解析 -webkit-clip-path
[工具] Preview - 修改MDX CSS的神器，支持CSSJS实时预览...
https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=39559&highlight=preview

mdict 無法解析 -webkit-clip-path

大橙子 · 发表于 2020-10-28 12:15:38

楼主，遇到了跟你一样的问题，就是各个词典默认字体大小不一致，想设置不一样的缩放比例
楼主你的例子改成
zoom: 1.5;
就可以了！
从网上查到，transform: scale 的缩放不改变元素占据的原始尺寸，页面布局不会发生变化（也就是说不会重新换行，放大就会超过窗口大小、出现滚动条）；而 zoom 的缩放改变了元素占据的真实空间大小，会重新渲染页面（也就是说超出窗口的就会自动换行）效果完美！

starmars · 发表于 2020-11-19 12:32:21

大橙子发表于 2020-10-28 12:15
楼主，遇到了跟你一样的问题，就是各个词典默认字体大小不一致，想设置不一样的缩放比例
楼主你的例子改成 ...

不同的MDX排版设计都不同的。zoom对有的mdx可能的确是效果完美，但对另一些就大打折扣。之所以感觉zoom不错是因为您试的还不够多哦。
头痛得很，目前完美缩放的词典还没有，尽管看网页的浏览器都能完美缩放。看来词典软件和看网页的浏览器多少是有差别的。

大橙子 · 发表于 2020-11-20 08:09:16

starmars 发表于 2020-11-19 12:32
不同的MDX排版设计都不同的。zoom对有的mdx可能的确是效果完美，但对另一些就大打折扣。之所以感觉zoom不 ...

我在 MDict 上遇到了错位，GoldenDict 里是完美的
如果是具体 mdx 的问题就要看具体是啥问题了，只说“大打折扣”又不说具体是什么问题，这样恐怕别人想帮也没法帮啊

starmars · 发表于 2020-11-21 21:26:15

大橙子发表于 2020-11-20 08:09
我在 MDict 上遇到了错位，GoldenDict 里是完美的
如果是具体 mdx 的问题就要看具体是啥问题了，只说“大 ...

请对牛津朗文柯林斯韦氏麦克米伦剑桥所有这些英汉双解词典拥zoom做实验，好多都是ZOOM无法正确缩放的，不信你试试吧。

[讨论] 如何在CSS/JS中设置真正和词典软件中一致的完美网页缩放？