惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

G
GRAHAM CLULEY
V
V2EX
WordPress大学
WordPress大学
博客园 - Franky
Last Week in AI
Last Week in AI
博客园 - 司徒正美
有赞技术团队
有赞技术团队
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
博客园 - 【当耐特】
V
Visual Studio Blog
C
CERT Recently Published Vulnerability Notes
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
Jina AI
Jina AI
Attack and Defense Labs
Attack and Defense Labs
腾讯CDC
The Hacker News
The Hacker News
Hugging Face - Blog
Hugging Face - Blog
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
J
Java Code Geeks
人人都是产品经理
人人都是产品经理
阮一峰的网络日志
阮一峰的网络日志
T
Tailwind CSS Blog
S
SegmentFault 最新的问题
大猫的无限游戏
大猫的无限游戏
小众软件
小众软件
A
Arctic Wolf
量子位
博客园 - 聂微东
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
N
News and Events Feed by Topic
雷峰网
雷峰网
博客园_首页
Google Online Security Blog
Google Online Security Blog
Spread Privacy
Spread Privacy
罗磊的独立博客
H
Hacker News: Front Page
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
月光博客
月光博客
TaoSecurity Blog
TaoSecurity Blog
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
博客园 - 三生石上(FineUI控件)
宝玉的分享
宝玉的分享
IT之家
IT之家
The Cloudflare Blog
爱范儿
爱范儿
博客园 - 叶小钗
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Apple Machine Learning Research
Apple Machine Learning Research
酷 壳 – CoolShell
酷 壳 – CoolShell

月光博客

AI编程从零开始:环境配置到开发调试-月光博客 母亲被保健品诈骗-月光博客 向身体低头,向岁月妥协:我的高血压“还债日记” -月光博客 月光博客电子书:《信息安全指南》 谷歌发布2025年度搜索排行榜 中国2025社会热点大事记 2025年十大流行语发布 7天3次,骗子骗走我母亲95万元 “技术男”设三重安全墙,母亲95万存款还是被骗走了 电信诈骗后的复盘:母亲的95万元,是怎么从手机银行里消失的 母亲被电信诈骗95万元的全过程 阿根廷警察被谷歌街景相机拍到裸照 网信办开展“清朗·整治恶意挑动负面情绪问题”专项行动 翟欣欣敲诈勒索案一审获刑12年 《绝命毒师》影评:力工觉醒后的梭哈至死 《人工智能生成合成内容标识办法》正式施行 用AI分析你的财务信息 腾讯子公司实习HR怒怼求职者后被开除 OpenAI发布最强模型GPT-5,免费向所有用户开放 用AI解构你的日记 用AI分析你的游戏偏好 用AI分析你的观影偏好 用AI分析你的听歌偏好 《白鹿原》人物分析:乱世浮沉中的人性剖析 乌托邦的捷径:让AI治理“失败国家” 苹果AI的“路径错误”:为什么它在大模型时代掉队了? 《暗黑破坏神3》第35赛季开荒指南 我对特朗普的看法 欧·亨利十大经典小说鉴赏 HBO电视剧《最后生还者》第二季影评 播客自动化更新分发教程 《围城》人物分析:知识分子的时代困局 NotebookLM音频概览支持中文 《暗黑破坏神3》国服回归 《暗黑破坏神3》国服赛季开荒指南 《网络数据安全管理条例》正式发布实施 契约之下的自由:社会契约论 如何去除文章的AI味道 电影《好东西》影评 我的价值观:义务论和效益论 《魔兽世界》正式服PVP教程 电影《哪吒2》影评 中医理论不是科学理论 DeepSeek与主流AI模型对比评测 TikTok停止在美国服务 我的三观(世界观、价值观、人生观) 《无限暖暖》游戏评测 2024年财经年度总结 月光博客2024年推荐阅读文章 IMDb公布2024年热门电影和电视剧 2024年十大流行语发布 谷歌发布2024年度搜索排行榜 中国2024社会热点大事记 Google Adsense税务居住地证明申请教程 极狐GitLab回应前员工实名举报公司高管:恶意诽谤造谣 升级FTTR千兆光纤带宽 字节跳动起诉前实习生索赔800万 看完历届奥斯卡最佳影片后的体验 李子柒已经正式改名并恢复更新 苹果历年新春短片 “姜萍事件”调查结果公布 胡锡进社交平台恢复更新 上海女子沙白自杀的伦理道德分析 京东与杨笠一起玩火 字节跳动大模型训练被实习生攻击,涉事者已被辞退 《加勒比海盗》系列电影 《夺宝奇兵》系列电影时间线 《侏罗纪公园》系列电影时间线 《终结者》系列电影时间线 华为禁止用户从外部手动安装安卓应用(APK文件) 《炉石传说》国服回归一片混乱 官媒辟谣苹果手机被远程引爆 小米回应摄像头里出现陌生男子说话 环球人物:民族大义不是流量密码,盲目排外没有土壤 《异形》系列电影时间线 看完IMDb250后的体验 暴雪《炉石传说》国服开启预约 网易DD参与代打《魔兽世界》事件的深入分析 福建男子四年前“翻墙”浏览境外网站被行政处罚 《魔兽世界》正式服开服两周游戏体验 暴雪游戏足迹查询:查看暴雪游戏的数据 用AI分析你的推特社交网络数据 胡锡进停更三个月 国家网络身份认证公共服务管理办法向社会公开征求意见 苹果将部分产能转回中国 Windows全球大范围蓝屏 电影《V字仇杀队》影评 微软中国员工禁用安卓手机:只能用iPhone 《魔兽世界》怀旧服“巫妖王之怒”游戏体验 百度旗下萝卜快跑已在多个城市开放载人测试 我为什么不喜欢华为这家企业 胡锡进:强烈谴责苏州袭击日本人的凶手 20美元在美国超市的购买力 华为紧急辟谣“是国内最大的牛肉进口商” 苹果公司公布2024年Apple设计大奖获奖名单 自动生成电影剧本:人工智能技术的崭新里程碑 电影《芳华》人物分析 Steam账号被盗号的解决方法 中文互联网内容正在逐步消失 马斯克:推特域名已全部转移到X
宽屏显示下的网站网页宽度
月光 · 2009-04-07 · via 月光博客

当前的前端设计师有一个苦恼,就是用户屏幕显示分辨率的各不相同,并不能只按照一个模式设置网站的宽度,特别对于宽屏用户来说更为烦恼。

根据我的博客上月统计,1024×768分辨率的用户只占到50%,并且在逐月下降,而1280-1440这三个分辨率的用户则达到了35%,如果按照这个速度发展下去,明年就会超过1024分辨率,这说明,使用17寸普屏的用户正在加速减少,而17、19寸宽屏用户正在稳步逐步增加,这给前端设计师的一个考验是,不能只考虑1024×768分辨率的用户了,要想想大屏幕宽屏用户的浏览体验了。

数据统计

Google Reader是一个典型的内容阅读性质的网站,用户在上面阅读时间非常之长,那么,Google的前端设计师是怎么考虑这个问题的呢?

大家可以做一个实验,在19寸宽屏下,如果网站页面全文显示,铺满整屏,那么阅读的时候,眼睛需要从左转到右,才能阅读完一行,屏幕越大,这种效果越明显,因此,一个让用户大量阅读的网站,为了照顾好读者的眼睛,在大屏幕宽屏下,也不应该全屏铺开的显示文字内容。

在1024×768分辨率下,使用Google Reader时,会发现内容是全屏显示的,但是,使用19寸宽屏在1440×900分辨率下打开Google Reader,会发现这时并没有宽屏显示内容,右边留出了一大块空白,如下图显示。

宽屏显示下的网站网页宽度

使用工具测量宽屏下Google Reader的内容显示像素,结果是955个像素,很有趣的数字。

我在《更改博客页面宽度到960像素》一文中已经提到了,现在的网页设计的行业标准应该就是950/960像素宽度,这个宽度应该是人眼在不转动的情况下能看到的极限了,实际阅读区域正文的宽度是650像素,Google Reader的这个设计很有意思。

在Google搜索引擎中,搜索结果的显示宽度确是另外一个数字580像素,这是又一种内容宽度设计,Google这么做的原因估计是为了更好的显示右侧广告。

我的博客最初使用的是778像素这个宽度,在2008年的那次改版后,修改为878像素宽度,主要是为了修改方便,直接加了100像素,正文区域的阅读宽度是668像素,左侧侧栏宽度是200像素。不过,今年的改变,我的博客的整体宽度修改为960,正文区域的宽度是728像素,728的宽度仅仅为了好放Google Adsense而已。

宽屏显示下的网站网页宽度