Vincent's waking life

他是彭于晏?
那我是谁?


  • Home

  • Footprint

  • Cheat sheet

七牛把用户当猴耍呢,一生黑

Posted on 2018-12-06 | In power user of everything

七牛云速度还是可以的,也算厚道,一直免费给你一个二级域名用,10G/月的免费流量对于我也够用。

但是最近估计有人用图层上传了不和谐的东西(这些毒瘤也该死),导致七牛云收回了二级域名使用权,之前上传到图层的文件都报错“no such domain”。

那好吧,我看看怎么挽回,一看就傻眼了:

  • 想继续用七牛云
    • 可以,先绑自己域名
  • OK,我绑还不行吗?
    • 域名要备案
  • 备 NMB 案,老子不用了,批量下载
    • 没有批量下载 GUI
  • 我写脚本下载
    • 原来送的二级域名收回了,所有图片都没办法访问了。但是有 shell 工具可以批量下载
  • 那我试试 shell
    • 原来送的二级域名收回了,没办法获取下载地址

意思是七牛收回二级域名了,不仅外网无法访问你的资源,你自己也没有办法在后台操作了,如果你之前没备份,就瓜起了

不说了,七牛一生黑

  • 有补救办法吗?
    • 备(NMB)案

好在天无绝人之路,曲线救国的方法

  1. 重新创建一个测试 bucket(会分配一个新的测试域名,有限期 30 天)
  2. batchcopy 原 bucket 到新的 bucket
  3. qdownload 新 bucket

要用到的工具:qshell

这个命令行工具 api 据我观察最近已经和两个月前不兼容了(黑点 2)

目前主要关注batchcopy和qdownload

鉴于 api 经常变就不贴命令了,自己看文档吧。

删 bucket,走人

macOs 下设置Capslock切换输入法

Posted on 2018-12-05 | In power user of everything

如果你有以下需求,不妨一试:

  • 使用搜狗输入法(为了词库)
  • 外接键盘,想实现内置/外置键盘的 cmd 和 opt 位置一致
  • 想用 Capslock 一键切换中/英

预防杠精:

系统自带拼音输入法/搜狗输入法都可以设置 caps 切换中英,为何折腾?

答:很多场景,例如各种登录的 pwd input 获得焦点时,系统会自动把输入法切换为自带的英语输入法,这时你是不知情的,你不得不用 ctrl + space 切换回中文输入法。这个过程需要确认,有种反复插拔 usb 的感觉。

你把默认的英文输入法删除了不就好了?

答:首先删不掉,10.14 之前有方法可以 hack,但不推荐,有坑,而且不安全。

实现方法

下载Karabiner,安装之,重启系统

Karabiner是一个 mac 下修改键盘映射的工具

关闭搜狗的中英切换快捷键

此步骤在于避免误操作,从此以后只有两种输入法:英文/中文,互相的状态也单一,纯粹

设置切换输入法的快捷键为 command+control+option+shift+p

我知道默认的快捷键是ctrl+space,设成这个几乎不会用到的快捷键,可以省出ctrl+space,设置成更常用的功能

利用 Karabiner 将Capslock映射为command+control+option+shift+p

配置文件地址在 ~/.config/karabiner/karabiner.json,这里只贴出关键配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
"complex_modifications": {
"parameters": {
"basic.simultaneous_threshold_milliseconds": 50,
"basic.to_delayed_action_delay_milliseconds": 500,
"basic.to_if_alone_timeout_milliseconds": 1000,
"basic.to_if_held_down_threshold_milliseconds": 500
},
"rules": [
{
"manipulators": [
{
"description": "Change caps_lock to command+control+option+shift+p.",
"from": {
"key_code": "caps_lock",
"modifiers": {
"optional": ["any"]
}
},
"to": [
{
"key_code": "p",
"modifiers": [
"left_command",
"left_control",
"left_option",
"left_shift"
]
}
],
"type": "basic"
}
]
}
]
}

交换 cmd/opt

保证外接键盘的键位和内置键盘一样,不然会疯掉

后记

按照以上设置,可以实现不用考虑内置/外置键盘,只需要 caps 就能在中/英之间切换,就算 pwd input 自动切换成英文输入法了,只要发现了点一下 caps 就好,不用再反复确认到底是输入法切换了还是中英状态切换了
设置开机启动什么的不赘述了

缺点

大小写指示灯再也不会亮了

本文完。

一周网摘2018-11-w5

Posted on 2018-11-30 | In 杂

每个 JavaScript 工程师都应懂的 33 个概念 @leonardomso

这个项目是为了帮助开发者掌握 JavaScript 概念而创立的。它不是必备,但在未来学习(JavaScript)中,可以作为一篇指南。

本篇文章是参照 @leonardomso 创立,英文版项目地址在这里。 由于原版资源都要翻墙,所以本人创立一个中文版,附上关于这些概念在国内的一些文章和视频。 若有觉得更好的文章或者视频,可以贡献出来,觉得有误的,请联系我删除。


Science Fiction Interfaces(汤不热好像要科学上网)

![](/pic/sinaimg/006tNbRwgy1fxlac0gfjyj30zk0k0gp2.jpg)

一些科幻作品里出现的电脑操作 UI 界面


ScriptOJ

![](/pic/sinaimg/006tNbRwgy1fxlaf9lu74j31350u01kx.jpg)

ScriptOJ 是首个 Web 前端开发评测系统
从大量实战代码、面试题目中总结出精华题库和相应的测试
帮助你提升、锻炼 Web 开发技能,简单直接地获取第一手 Web 前端实战经验。


HTML5 声音引擎 Howler.js

Howler.js 支持很多声音格式以兼容各种浏览器。MP3, MPEG, OPUS, OGG, OGA, WAV, AAC, CAF, M4A, MP4, WEBA, WEBM, DOLBY, FLAC.


macOS Mojave 上的 launchrocket 凉了

“That’s really unfortunate. That probably means this prefpane is effectively dead.”

官宣

不过有替代方案

1
brew services list

and then

1
brew services start xxx(your service)

每月电影2018-10

Posted on 2018-11-19 | In movies

动物世界 (2018)

动物世界

豆瓣评分: 7.3/10
个人评分: 7.5/10

漫画改编,完成度和工业化程度在大陆电影中可称翘楚。如果主演不是李易峰和周冬雨可能还有加分

不足之处在于导演炫技痕迹明显且无必要


奇迹

奇迹

豆瓣评分: 8.8/10
个人评分: 8.5/10

是枝裕和为新干线拍的命题作文

小朋友的视角与世界已经太久没有体会了,温暖,纯粹


无人知晓

无人知晓

豆瓣评分: 9.1/10
个人评分: 8.8/10

【西巢鸭弃婴事件】改编,人类的不负责任/不作为是一种极端的恶,人性之下是兽性


网络谜踪 Searching (2018)

网络谜踪

豆瓣评分: 8.5/10
个人评分: 8.5/10

据了解应该不是第一部以电脑屏幕为呈现场景的电影,但却是我看的第一部。至少形式上很震撼

教科书般的本格派推理,真相导演其实早就预埋在正品之中

韩国周杰伦跑了一万年龙套终于接了部好电影


需避坑:

  • 七月与安生 (2016),除了狗血还是狗血
  • 蚁人2:黄蜂女现身 Ant-Man and the Wasp (2018),格局小得可怕

一周网摘2018-09-w2

Posted on 2018-09-08 | In 杂

nginxconfig.io

![](/pic/20180910/nginxconfig.io.jpg)

比较懒不想写 Nginx 配置?可以去 nginxconfig.io 在线生成一套,有前端(MVVM)、PHP 后端、Node.js、单页应用、WordPress 等多个预置模板,一般需求稍微改改就够了。


口红色号名称 - RGB 颜色值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{
"brands": [{
"name": "圣罗兰",
"series": [{
"name": "莹亮纯魅唇膏",
"lipsticks": [{
"color": "#D62352",
"id": "49",
"name": "撩骚"
}, {
"color": "#DC4B41",
"id": "14",
"name": "一见倾心"
}, {
"color": "#B22146",
"id": "05",
"name": "浮生若梦"
}, {
"color": "#A25356",
"id": "08",
"name": "纯真梦幻"
},
...
}, {
"name": "香奈儿可可小姐",
"series": [{
"name": "唇膏水亮",
"lipsticks": [{
"id": "69",
"color": "#F17365",
"name": "传情"
},
...

“老婆你看我还是很疼你的”


精辟

这就好像说寺庙门口阮老师在给穷人施粥,这时候一个(伪)美食家走了过来,拿起勺子在桶里搅来搅去,然后从桶底捞出了一根头发,接着就大声的向大家喊到:
快来看,这个人做的粥有问题,何止是有问题,简直是完全错误的。
阮老师让很多人从饿肚子到吃饱饭,但它可能确实就是清粥白饭,偶尔也有点瑕疵。
但那些高喊着大家要吃燕窝鲍鱼的人,你们倒是能长年累月的拿出来分给大家啊。
结果这些人只是说着风凉话,看着热闹,最后还一哄而上砸了人家的摊子。
你说你们是不是有病

via 如何看待文章《面试官:阮一峰版的快速排序完全是错的》? - 王德福的回答 - 知乎


visualgo.net

![](/pic/20180910/visualgo.jpg)

推荐一个算法可视化项目,常见的算法基本都找的到,并且每一步都会动态演示出来,不过有点美中不足的是连伪代码都顺手翻译了(看到“做…while”这种组合挺懵逼的……不习惯的话可以切英文版),初学算法的话可以看一看。

微信对我来说只是IM+支付工具,仅此而已

Posted on 2018-09-03 | In power user of everything

前言

曾几何时,每次点亮手机屏幕,微信的图标上面必然会有未读提醒,强迫症的你点进去以后却发现是某公众号的日经广告推送。关掉公众号信息提醒吧,又看不到文章;不关吧过了几分钟又弹出来一篇“震惊”。

是时候作出改变了。

微信的平台化

还记得微信刚刚诞生时,“免费发短信”是其唯一卖点。那时的我,支付使用支付宝,阅读主要靠 RSS,微信的出现似乎对于我来说没什么影响。

后来的微信逐渐往平台发展:

  • 摇一摇(陌生人社交)
  • 朋友圈(Facebook of China)
  • 公众号(干掉博客)
  • 小程序(appstore in 微信)

平台化的微信极大的降低了互联网小白用户的使用门槛:记不住网站域名?-没关系,直接找认证过的公众号;不会用浏览器收藏夹?-微信自带“收藏功能”;不会分享链接?二维码在每篇 post 底部都有。

微信让那些曾经对于电脑和智能手机望而却步的大爷大妈每天刷得不亦乐乎,成为收割“国民总时间”的利器。

灾难

平台化的微信对我来说是个灾难。

我从来不喜欢在微信看文章,因为经常在你看文章的过程中,有好友消息来了,你不得不退出去回消息,再重新回到文章。这个“退出文章-回消息-重新寻找文章入口-返回阅读进度”的体验实在是太糟糕了。尽管微信最近的版本加入了文章悬浮球的功能,但也仅是聊胜于无。

自媒体概念的兴起已经从事实上杀死了独立 blogger。现在某个领域的内容创作者如果想发声,不大会注册域名,搭建独立博客。更好的选择是直接开个公众号,不管是运维还是推广成本都比搭建博客低太多。

从最近微信公众号改版加入信息瀑布流的举动来开,微信的公众号有点想接替 rss 的意思。但是且不谈互联网中立,单是公众号信息流无法分类,无法显示未读,仅有一个残废的置顶功能,它还远远不能满足我的需求。

微信阅读:曲线救国?

微信阅读可以直接把公众号作为文集加入书架,并可以整理分类,也可以显示更新,曾经有段时间我尝试使用它来阅读所有的微信公众号文章。但是微信阅读还是无法显示未读条数,且没有信息流。当你想集中阅读的时候,切换文章/切换文集/切换分类的操作还是让你想死。

重回 rss

还好 rss 还没死透。rsshub 等渠道还是可以订阅到所有的微信公号文章,甚至还有全文输出的 feed 可以在微信删帖前缓存文章内容。关于如何使用 rss 订阅公众号有时间再写篇文章。

上帝的归上帝,凯撒的归凯撒。

无论是屏幕尺寸的局限,还是多任务系统的羸弱,都注定了手机成不了生产工具。

现在我的微信仍保留的功能:

  • 朋友圈(熟人社交还是绕不过去)
  • 小程序(即用即搜,用完即走)
  • 支付(说句题外话,支付宝 vs 微信支付这件事上我却比较看好微信,毕竟支付宝能做的事微信都能做,微信能做的事支付宝却未必)

除了一些会员类和银行提醒类的公众号,再没关注任何其他公众号。

(全文完)

每月电影2018-09

Posted on 2018-08-09 | In movies

走到尽头 끝까지 간다 (2014)

豆瓣评分: 7.8/10
个人评分: 8.5/10

“这部电影没有设置正面人物和反面人物的对比。出场的所有警察几乎都是某种意义上的“坏警察”。但是这些坏警察都有自己的道德底线,他们贪钱但也能干,他们从罪犯那里捞钱,但不利用职务之便欺负平民,他们绝不杀人。这是“冷硬派”侦探故事的典型设定。更符合真实的复杂人性,而杜绝了脸谱化的说教味道。这是韩国主流电影的又一个致胜之处。题材的广泛和自由的表达。他们永远把叙述故事放到第一位,而非警世和教育。韩国电影之所以产生好故事,一个重要原因就是从不避讳所谓的“阴暗面”。你不去触及,那些暗面仍然存在,而你真的写了一群坏警察,也不会有人认为所有韩国警察都作恶多端。成年人看电影,尤其对主流故事片,看的就是虚幻的故事,进入情境,投射感情,抽离回现实,这就是全部。”

白话版大O算法复杂度

Posted on 2018-08-03 | In 前端 , js

大O算法

via 如何理解算法时间复杂度的表示法 O(n²)、O(n)、O(1)、O(nlogn)等? - 司马懿的回答 - 知乎 侵删

$O(1)$

先从 $O(1)$来说,理论上哈希表就是 O(1)。因为哈希表是通过哈希函数来映射的,所以拿到一个关键字,用哈希函数转换一下,就可以直接从表中取出对应的值。和现存数据有多少毫无关系,故而每次执行该操作只需要恒定的时间(当然,实际操作中存在冲突和冲突解决的机制,不能保证每次取值的时间是完全一样的)。举个现实的例子,比如我的身后有一排柜子,里面有香蕉(代号 B),苹果(代号 A),葡萄(G),现在你说 A,我迅速的就把苹果递过来了;你说 B,我迅速就把香蕉递过来了。就算你再增加菠萝(P)、火龙果(H),但是你说一个代号,我递给你相应的水果这个速度是几乎不会变的。


$O(n)$

至于 $O(n)$ ,这个就是说随着样本数量的增加,复杂度也随之线性增加。典型的比如数数。如果一个人从 1 数到 100,需要 100 秒,那么从 1 到 200,基本上不会小于 200 秒,所以数数就是一个 $O(n)$ 复杂度的事情。一般来说,需要序贯处理的算法的复杂度,都不会低于 $O(n)$ 。比如说,如果我们要设计一个算法从一堆杂乱的考试的卷子里面找出最高的分数,这就需要我们从头到尾看完每一份试卷,显然试卷越多,需要的时间也越多,这就是一个 $O(n)$ 复杂度的算法。


$O(n^2)$

而$O(n^2)$ 是说,计算的复杂度随着样本个数的平方数增长。这个例子在算法里面,就是那一群比较挫的排序,比如冒泡、选择等等。沿着我们刚才的说的那个试卷的例子,等我们找出最高的分数之后,放在一边另起一堆,然后用同样的方法找第二高的分数,再放到新堆上…… 这样我们做 n 次,试卷就按照分数从低到高都排好了。因为有 n 份试卷,所以这种翻试卷,找最高分的行为,我们要做 n 次,每次的复杂度是 $O(n)$ ,那么 n 个 $O(n)$ 自然就是 $O(n^2)$

在比如说构建一个网络,每个点都和其他的点相连。显然,每当我们增加一个点,其实就需要构建这个点和所有现存的点的连线,而现存的点的个数是 n,所以每增加 1,就需要增加 n 个连接,那么如果我们增加 n 个点呢,那这个连接的个数自然也就是 $n^2$ 量级了。

无论是翻试卷,还是创建网络,每增加一份试卷,每增加一个点,都需要给算法执行人带来 n 量级的工作量,这种算法的复杂度就是 $O(n^2)$。


O(nlogn)

然后是 $O(nlogn)$ ,这恐怕是常见算法复杂度里面相对最难理解的,就是这个 log 怎么来的。前面那个 n,代表执行了 n 次 $log(n)$ 的操作,所以理解了$log(n)$,就理解了$nlog(n)$。

$O(logn)$的算法复杂度,典型的比如二分查找。设想一堆试卷,已经从高到底按照分数排列了,我们现在想找到有没有 59 分的试卷。怎么办呢?先翻到中间,把试卷堆由中间分成上下两堆,看中间这份是大于还是小于 59,如果大于,就留下上面那堆,别的丢掉,如果小于,就留下下面那堆,丢掉上面。然后按照同样的方法,每次丢一半的试卷,直到丢无可丢为止。

假如有 32 份试卷,你丢一次,还剩 16 份 ,丢两次,还剩下 8 份,丢三次,就只剩下 4 份了,可以这么一直丢下去,丢到第五次,就只剩下一份了。而 $log_2(32) = 5$ 。也就是我们一次丢一半,总要丢到只有一份的时候才能出结果,如果有 n 份,那么显然我们就有:

$$\frac{n}{2^k} = 1\Rightarrow k = log_2 n$$

也就是大约需要$log_2 n$次,才能得出“找到”或者“没找到”的结果。当然你说你三分查找,每次丢三分之二可不可以?当然也可以,但是算法复杂度在这里是忽略常数的,所以不管以 2 为底,还是以什么数为底,都统一的写成 $log(n)$的形式。

理解了这一点,就可以理解快速排序为什么是 $O(nlogn)$ 了。比如对一堆带有序号的书进行排序,怎么快呢?就是随便先选一本,然后把号码大于这本书的扔右边,小于这本书的扔左边。因为每本书都要比较一次,所以这么搞一次的复杂度是 $O(n)$,那么快排需要我们搞多少次呢?这个又回到了二分查找的逻辑了,每次都把书堆一分为二,请问分多少次手里才能只剩下一本书呢?答案还是 $logn$ 。而从代码的角度来说,在到达大小为一的数列之前,我们也是需要作 $logn$ 次嵌套的调用。

CROS 跨域排坑记

Posted on 2016-12-11 | In 前端 , js

简单请求和非简单请求

浏览器将 CORS 请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。

  • 请求方法是以下三种方法之一:
    • HEAD
    • GET
    • POST
  • HTTP 的头信息不超出以下几种字段:
    • Accept
    • Accept-Language
    • Content-Language
    • Last-Event-ID
    • Content-Type:只限于三个值:
      • application/x-www-form-urlencoded
      • multipart/form-data
      • text/plain

凡是不同时满足上面两个条件,就属于非简单请求。

浏览器对于非简单请求的处理

  • 自动发出一个”预检”请求,使用OPTIONS方法
  • 3 个关键头字段
    • Origin 表示请求来自哪个源
    • Access-Control-Request-Method *必需,列出浏览器的 CORS 请求会用到哪些 HTTP 方法
    • Access-Control-Request-Headers *非必需,列出浏览器 CORS 请求会额外发送的头信息字段

本地开发环境如何跨域联调

方法 1,chrome 插件

Allow-Control-Allow-Origin: *

此方法简单粗暴,但是缺点明显:如果服务端已指定 Access-Control-Request-Method,则此方法无效

方法 2,Charles /fiddler

以 Charles 为例:

menu

menu

menu

如果服务端已指定 Access-Control-Request-Method,可以修改之:

menu

Live App 页面布局

Posted on 2015-05-28 | In 前端 , css

一些知识

屏幕宽高比

  • 主流安卓 720p 手机 720/1280=0.5625
  • 主流安卓 1080p 手机 1080/1920=0.5625
  • 主流安卓 1440p 手机 1440/2560=0.5625
  • iPhone5 640/1136≈0.56
  • iPhone6 750/1334≈0.56
  • iPhone6P 1242/2208≈0.56 (实际运行分辨 1080p)

查看更多

iPhone 的状态栏(信号电量栏)高度:40px

iPhone 微信的返回栏高度 88px

  • 微信浏览器可视高度 - iphone5 1136-40-88=1008px - iphone4 960-40-88=832px

关于 dppx

dpr(Device Pixel Ratio 设备像素比)

上面所说的 px 是设备像素(Device Pixels),对于我们在 web 开发中接触到的是 css 像素(CSS Pixel),retina 屏幕出现以后,设备像素和 css 像素不再是 1:1 的关系.各厂家和平台通常会通过一个比值 dpr 将分辨率转换为一个较为便于开发的像素.打个比方说,iPhone5 的设备像素是 640x1136,它的 dpr 是 2,所以在 web 页面的 css 计算中需要将 640x1136 除以 2,按 320x568 计算

dppx: Number of dots per px unit. (每像素包含点的数量)

dppx 在数值上等于 dpr

查看更多设备的 dppx

dpi

题外话,dpi 是设备分辨率(Device Pixels)和设备物理尺寸(单位:英寸)之间的比值,跟我们 web 前端开发没有一毛钱关系,我们不要理它.


此分隔线以下所有内容均指 css 像素,不再讨论设备像素

极端宽高比

  • iPhone4 在微信浏览器中 320x416
  • iphone5 在 safari 桌面快捷方式中(无地址栏) 320x548


一些案例

有道云笔记 乱入学霸の世界

链接

  • 布局方式:流式布局
  • 向下兼容:主体部分高度不变

416
528

1
2
3
4
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
1
2
3
4
5
6
7
8
if (client_height < 540 && client_height > 500) {
$("body").addClass("hehe_screen");
}
if (client_height < 420) {
$("body").addClass("very_low_screen");
} else if (client_height < 500) {
$("body").addClass("low_screen");
}
1
2
3
.very_low_screen .q_0_container {
margin-top: -150px;
}

淘宝网|万能时装屋

链接

  • 纯图片素材,无文字,无表单
  • 布局方式:采用百分比绝对定位
  • 向下兼容:尽量保持主要区域可见.可以看见对于高度极端不足的 iphone4 屏幕实际上是舍弃了(东西点不到)
  • 整个页面未写 height 属性,所有background-image容器均使用padding-bottom撑出高度

416
528

1
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
1
2
3
4
5
6
7
html,
body {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
1
2
3
4
5
6
7
8
.sprue {
position: absolute;
left: 18.06%;
top: 0.2%;
width: 82.28%;
padding-bottom: 156.25%;
background-size: cover;
}

(淘宝)男人爱车 没玩没了

链接

  • 纯图片
  • 固定宽度 640
  • 定位:按像素绝对定位
  • 向下兼容:主要内容都在画面上半部分,下面的截掉了就截掉了无所谓
1
2
3
4
<meta
name="viewport"
content="width=640, user-scalable=no, target-densitydpi=device-dpi"
/>

416
528

(京东)京东 618 全民红包摇摇摇

链接

  • 图片+文字
  • rem
  • 向下兼容: 超出部分有内容则出滚动条,除此之外也是放任截掉
1
2
3
4
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>

416
528

416
528

京东微信购物礼包

链接

  • 高度不固定
  • 流式布局
  • rem

计算<html>标签 font-size 的算法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
!(function() {
var cw = document.documentElement.clientWidth || document.body.clientWidth,
zoom = cw / 320;
if (cw > 640) zoom = 2;
document.write(
'<style id="htmlzoom">html{font-size:' + zoom * 50 + "px;}</style>"
);
window.addEventListener("resize", function() {
(cw = document.documentElement.clientWidth || document.body.clientWidth),
(zoom = cw / 320);
if (cw > 640) zoom = 2;
document.getElementById("htmlzoom").innerHTML =
"html{font-size:" + zoom * 50 + "px;}";
});
})();

京东微信购物 1 周年

链接

  • 绝对定位(像素)
  • 向下兼容:缩放
1
2
3
4
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
1
2
3
element.style {
zoom: 0.693333333333333;
}

416
528

总结

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 强制页面全宽
  2. (设计)主要内容尽量放在页面靠上部分,至少兼容 iPhone4s
  3. 流式布局用 rem 体验最佳
  4. 全图片页面可以考虑所有元素绝对定位
1…345

48 posts
10 categories
46 tags
GitHub E-Mail Twitter Douban Zhihu
© 2014 — 2025 Vincent He