![同一分辨率下,不同计算机上的网站显示效果不同](https://linux22.com/image/1398946/%E5%90%8C%E4%B8%80%E5%88%86%E8%BE%A8%E7%8E%87%E4%B8%8B%EF%BC%8C%E4%B8%8D%E5%90%8C%E8%AE%A1%E7%AE%97%E6%9C%BA%E4%B8%8A%E7%9A%84%E7%BD%91%E7%AB%99%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C%E4%B8%8D%E5%90%8C.png)
你好! 一段时间后,我开始设计网站,正在寻找一台新笔记本电脑。我注意到,在不同的计算机上,使用相同的屏幕分辨率,网站看起来会有所不同。为什么会这样?我在几台运行 Windows 7 的不同笔记本电脑上使用 1366x768px 的屏幕分辨率,使用一台新笔记本电脑测试的网站更窄。我刚刚从博客中读到的像素密度是否是原因 -http://blogs.msdn.com/b/b8/archive/2012/03/21/scaling-to-different-screens。这是否取决于计算机有多旧,安装了哪种 Windows 等等。
如果有像素密度的话,是否有任何工具可以测试具有不同屏幕分辨率的网站等。我的意思是我可以在大屏幕上运行它,我可以决定我的虚拟屏幕有多大(多少英寸)以及屏幕分辨率有多大。
我正在寻找屏幕分辨率为 1600x900 的 14 英寸笔记本电脑,但该电脑的分辨率为 1366x768 时,网站看起来与另一台新的 15.6 英寸电脑不同。我感到很困惑。
谢谢你!
答案1
屏幕尺寸和传统屏幕(4:3)与宽屏(16:9)会产生很大差异。如果您将分辨率设置为 1366x768,而这不是原始分辨率,那么它要么会留下黑色边框,要么会拉伸以填满屏幕。所有平板显示器都有原始分辨率,即它有多少实际像素,其他一切都会拉伸得更大或更小以模拟该分辨率。
Windows 版本没有区别。
如果一个浏览器安装了一堆工具栏,这也会缩小你的可用区域并可能扭曲事物。高像素密度只会使事物变小。
如果浏览器的大小被调整到屏幕的一小部分,浏览器就会扭曲和变形内容以使其适合屏幕。
现在,如果您强制打开滚动条,那么它将在正确的空间中呈现内容,但用户除了垂直滚动之外,还必须左右滚动。
答案2
网站的外观在一定程度上取决于浏览器 - 特别需要注意的是,不同的浏览器可能具有与各种字体相关的不同大小(请参阅这里) 以及不同的安装字体和解释 HTML 的方式。
假设所有浏览器都以类似方式显示内容是不正确的,即使你指定了尽可能多的内容 - HTML 的理念是能够在任何给定的设备上适当地呈现 - 如果你需要精确的外观和感觉,那就是 PDF 的全部内容。
另一个提示 - 相同的颜色在不同显示器上看起来可能会有很大差异 - 这在设计时值得考虑。(例如,在一台显示器良好的笔记本电脑上,连接到一台便宜的大显示器时,这一点尤其明显 - 相同的窗口刚好移动 - 或者甚至在两台显示器上镜像的相同图像看起来也不同)。