-
chrome 缩放功能js如何实现_如何把网页变 APP ?Chrome 这个神功能一键搞定!
2020-12-17 03:02:45APP 的开发成本极高,有时候也会占用比较大的空间,而网页应用在不怎么占用空间的情况下,体验也越来越好。所以有时候,你可以尝试把常用的一些网页变成 APP 来使用。这里需要注意的是:APP,也就是 application 和 ...APP 的开发成本极高,有时候也会占用比较大的空间,而网页应用在不怎么占用空间的情况下,体验也越来越好。所以有时候,你可以尝试把常用的一些网页变成 APP 来使用。这里需要注意的是:APP,也就是 application 和 software 都是软件的意思,两者没有特殊差别。只是现在大家习惯把电脑应用叫做软件,而手机应用叫做 APP 而已。
你的高效生活视频书。
Topbook 常用的是谷歌的浏览器,而其中我们自己最常打开的,当然是自己的网站 topbook.cc。如何把它变成一个一键打开的 APP 呢?
江湖流传着一种非常原始的方法:在桌面上,找到你的谷歌浏览器快捷方式。单击右键,选择属性,在【目标】当中已经有的内容后面追加这样一条代码:
--app=https://topbook.cc/
这样,你就能以 APP 的方式打开网站了。这种使用方式需要你对浏览器的其他控件没有任何依赖,仅仅只是为了使用网站本身的功能。因为你会发现,所有和谷歌浏览器相关的控件全都消失了。
当然,我们还有更简单的方法 >>
更新新版的谷歌浏览器之后,你会发现,访问有的特定网站,比如免版权图片网站 https://unsplash.com/ 时,点击右上角的设置按钮,有一个【安装 unsblash】,点击它,再点击安装。你就获得了一个不错的独立 Unsblash 应用。比起江湖流传的方法,它多了一个谷歌翻译图标,以及设置按钮。你获得简洁流畅的使用感受时,也像在谷歌浏览器中一样,使用更多功能,并且“卸载”该应用。同时,你会发现,你的桌面多了一个 Unsblash 图标,点击你 Windows10 系统的开始菜单,近期安装应用中,也有它。
但是,怎么让其他网站也有这样的体验呢?以 topbook.cc 为例,其实也很简单,访问时,点击右上角的设置按钮,点击【更多工具】,选择【创建快捷方式】,同时勾选这里的【在新窗口中打开】就可以了。
当然,在开始菜单你也能看到。这样,我们可以把很多常用网站直接固定到开始屏幕并分组,让电脑无压力的同时,让工作学习更高效。
Mac 系统当中,也是同样的用法。然后你可以在应用界面看到刚刚添加的 APP.
当然,添加多了之后,你可能自己都忘了放哪儿了。你可以在谷歌浏览器地址栏输入 chrome://apps/ ,就能进行常规管理。
最后,欢迎在 Topbook 微信公众号后台回复 浏览器,查看其他关于浏览器的高效功能。
[ … ]
更多高效生活方式攻略,
欢迎登录『 Topbook 』小程序
Copyright.
吐血出品,未经许可不得转载、洗稿、盗用。
转载&商务合作请联系微信 yanghuaua .
-
为什么从网页上打印怎们好像被缩放_「每日一题」为什么不建议将 font-size 设置为 12px 以下?...
2020-11-29 23:49:48如果一定要设置为 12px 以下要怎么做?先看看把 font-size 设置为 12px 以下时的效果:(浏览器为 Chrome 52)在其他浏览器上效果却不一样:因为 Chrome 这款任性的浏览器做了如下限制:1. font-size 有一个最小值 ...问题:为什么不建议将 font-size 设置为 12px 以下?如果一定要设置为 12px 以下要怎么做?
先看看把 font-size 设置为 12px 以下时的效果:(浏览器为 Chrome 52)
在其他浏览器上效果却不一样:
因为 Chrome 这款任性的浏览器做了如下限制:
1. font-size 有一个最小值 12px(不同操作系统、不同语言可能限制不一样),低于 12px 的,一律按 12px 显示。理由是 Chrome 认为低于 12px 的中文对人类是不友好的。
2. 但是允许你把 font-size 设置为 0.
3. 这个 12px 的限制用户是可以自行调整的,进入 chrome://settings/fonts 设置,滚动到最下方你就可以调整 12px 为其他值。
如果我一定要设置小于 12px 的字体怎么办?
1. Chrome 29 版本之前,你可以使用 `-webkit-text-size-adjust: none;` 来解除这个限制。29 版本后,就不能这样做了。
2. 你可以先设置 12px,然后使用 transform: scale(0.833333) 将元素缩小,效果跟 10px 很接近。不过要注意的是,transform: scale 出了缩小 font-size,也会缩小其他一些属性,需要多测试。
好了,今天的分享就到这里。
-
自适应屏幕宽度_编写自适应网页的方法
2021-01-08 05:25:26有人@我说不知道怎么写自适应的网页,今天就先不写优化的了,我把写自适应网页的方法说下。自适应的网页工具:dw网页设计软件;ps图像处理软件。方法/步骤:1,在之间加入加入一行viewport标签。viewport是网页默认...大家好,我是吉礻羊。
有人@我说不知道怎么写自适应的网页,今天就先不写优化的了,我把写自适应网页的方法说下。
自适应的网页
工具:dw网页设计软件;ps图像处理软件。
方法/步骤:
1,在
之间加入加入一行viewport标签。viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
由于大家使用的电脑分辨率不一样,大小也不一样,所以网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素,对图像来说也是这样。
具体说,CSS代码不能指定像素宽度:
width:xxx px;
只能指定百分比宽度:
width: xx%;
或者
width:auto;
2,字体也不能使用绝对大小(px),而只能使用相对大小(em)。
例如:
body {font: normal 100% Helvetica, Arial,sans-serif;}
上面的代码指定,字体大小是页面默认大小的100%,即14像素。
3,"自适应网页"的实例:
body {
height: 800px;
}
.header {
width: 100%;
height: 15%;
background-color: aquamarine;
}
.leftside {
width: 20%;
height: 75%;
background-color: skyblue;
float: left;
}
.main {
float: right;
width: 80%;
height: 75%;
background-color: steelblue;
}
.footer {
clear: both;
width: 100%;
height: 10%;
background-color: darkgray;
}
-
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2021-01-21 14:20:34现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,怎么让双击不放大? 在Mobile页面上有提供viewport这个meta,可以用它来设置缩放。 但是在使用viewport之前要把页面的文档类型改成Mobile类型。 ... -
如何阻止移动设备(手机,pad)浏览器双击放大网页?
2019-10-29 12:43:26现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,怎么让双击不放大? 在Mobile页面上有提供viewport这个meta,可以用它来设置缩放。 但是在使用viewport之前要把页面的文档类型改成Mobile类型。 ...现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,怎么让双击不放大?
在Mobile页面上有提供viewport这个meta,可以用它来设置缩放。 但是在使用viewport之前要把页面的文档类型改成Mobile类型。 通常的页面DTD都是XHTML或者简单的HTML5声明,移动设备要用下面这个声明。
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
设置了DTD之后就可以使用viewport使页面禁止缩放了。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。
<meta name="viewport" content="user-scalable=0" />
但是为了更好的兼容,我们会使用完整的viewport设置。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /
貌似DTD只声明成HTML5就可以了,就不会被双击放大了。
-
怎么让手机网站自适应设备屏幕宽度?
2016-10-24 21:40:33通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新... -
你可能不知道的viewport
2018-06-09 17:25:00前几天偶然看到一个pc端网页,发现用手机打开竟然同比缩放了,作为一个前端从业者,我自然想要弄清它到底是怎么缩放的。之后查了它的meta信息,css和js,发现没有任何兼容手机端的代码,那它到底是怎么缩放的呢?... -
Google Map API V3调用arcgis发布的瓦片地图服务
2017-09-07 10:51:00由于最近项目需要用到CAD制作的地图,但之前一直使用的是用谷歌离线瓦片地图的方式,怎么样把CAD图像地图一样有缩放,移动的功能放到网页显示成了难题, 原先的谷歌地图的代码难道就不能用了?重新写一套代码得多久... -
(收藏)《博客园精华集》WEB分册
2009-12-04 22:49:00对“设置样式时怎么区分input是按钮还是文本框”问题的技术调查——把input里面的东西剔出来 (杨正祎)03. "兼容 IE,Firefox 的图片自动缩放的CSS" (MaxIE)04. [教程] 谈谈网页设计中的字体应用 (1) Font Set (棕熊)... -
黑客记事本源码
2013-07-27 10:17:55②删除空行 当要把电脑上的小说放到手机上看时 可以让小说的体积缩小很多 ③自动保存 模仿WORD的自动存盘功能 默认3秒保存一次 ④支持拖曳打开文本功能 Crack8记事本右键菜单里的功能 ⑤CMD运行 (在... -
求教Fragment和ListView点击跳转
2016-04-20 02:34:54Toast.makeText(getActivity(), "网页加载完成", Toast.LENGTH_SHORT).show(); } else { Toast.makeText(getActivity(), "加载中", Toast.LENGTH_SHORT).show(); } } }); } public boolean onKeyDown(int ... -
网管教程 从入门到精通软件篇.txt
2010-04-25 22:43:49小编的确一直都想把这方面的命令做个总结,这次辛苦老范给我们整理了这份实用的秘笈。 Bootcfg bootcfg 命令启动配置和故障恢复(对于大多数计算机,即 boot.ini 文件)。 含有下列参数的 bootcfg 命令仅在... -
vc++ 应用源码包_1
2012-09-15 14:22:12这个例子就是查询任何可执行文件的版本信息并且 C++builder 和 VC 都通用,只需要把 AnsiString 替换成 CString 就行了。 gh0st v3.6 源码 - 可下断点调试! GMem 内存管理单元源码。GMem.cpp和GMem.h是内存管理... -
vc++ 应用源码包_2
2012-09-15 14:27:40这个例子就是查询任何可执行文件的版本信息并且 C++builder 和 VC 都通用,只需要把 AnsiString 替换成 CString 就行了。 gh0st v3.6 源码 - 可下断点调试! GMem 内存管理单元源码。GMem.cpp和GMem.h是内存管理... -
vc++ 应用源码包_6
2012-09-15 14:59:46这个例子就是查询任何可执行文件的版本信息并且 C++builder 和 VC 都通用,只需要把 AnsiString 替换成 CString 就行了。 gh0st v3.6 源码 - 可下断点调试! GMem 内存管理单元源码。GMem.cpp和GMem.h是内存管理... -
vc++ 应用源码包_5
2012-09-15 14:45:16这个例子就是查询任何可执行文件的版本信息并且 C++builder 和 VC 都通用,只需要把 AnsiString 替换成 CString 就行了。 gh0st v3.6 源码 - 可下断点调试! GMem 内存管理单元源码。GMem.cpp和GMem.h是内存管理... -
vc++ 应用源码包_4
2012-09-15 14:38:35这个例子就是查询任何可执行文件的版本信息并且 C++builder 和 VC 都通用,只需要把 AnsiString 替换成 CString 就行了。 gh0st v3.6 源码 - 可下断点调试! GMem 内存管理单元源码。GMem.cpp和GMem.h是内存管理... -
vc++ 应用源码包_3
2012-09-15 14:33:15这个例子就是查询任何可执行文件的版本信息并且 C++builder 和 VC 都通用,只需要把 AnsiString 替换成 CString 就行了。 gh0st v3.6 源码 - 可下断点调试! GMem 内存管理单元源码。GMem.cpp和GMem.h是内存管理...