Question

我是一位有抱负的网络开发人员，我一直想知道是否可以在不使用闪存的情况下制作完全“可扩展”的网站。

也许是一个JQuery插件，可以根据身体本身缩放体内的每个对象，所以如果它的宽度是窗口的100％，那么它内部的所有内容都会按比例缩放。

就我个人而言，我认为这是必要的，因为显示器的分辨率和像素密度都变得不一致，你不能假设一个特定的分辨率，并且中位数对极端非常不利，这是用户的一个重要部分。浏览器内缩放不是一个好的解决方案。

我的想法是让所有东西都超大尺寸，例如：在XGA屏幕上以50x50px显示的图像，在QXGA屏幕中以100x100px显示，并且图像本身可以是120x120px JPEG。当然，不可能应用花哨的效果来调整像双三次插值，可能只是最近邻，但它比使用放大镜更好:)。

恕我直言，应该有一个CSS单位，它是浏览器窗口的百分比，例如，wx和wy，所以属性fontsize：0.3wx;将始终将字体缩放到窗口x大小的0.3％。

现在像素密度范围从<100到> 200ppi，不计算不同的分辨率。为XGA屏幕开发的具有固定宽度的网站在高分辨率屏幕中变得非常糟糕，特别是如果没有花哨的背景。监视器变得越来越大，ppi越来越高，并且还有便携式设备具有低分辨率。当然，当你只需要支持SVGA和XGA分辨率时，这是不必要的，但这是最后一个千年，现在分辨率范围从WVGA（平板电脑）到WQXGA（现代显示器/ mac），对于智能手机和袖珍设备，我认为它是可以制作单独的模板，但不适用于平板电脑，笔记本电脑，低端台式机，高端台式机。

所以，如果有人知道如何做这样的事情，请知道！否则我认为不可能避免闪存，越来越多的便携式设备支持闪存，它允许您制作完全可扩展的网站，在所有显示器和平台上看起来完全相同。

谢谢。

PS :( 2013）事实证明我放弃了网络开发。现在事情变得更加标准化，但即使支持所有不同的浏览器和系统真的是一场噩梦。当然不适合我。

Answer 1

精心设计的样式表将完成大部分工作...不是根据浏览器大小而是文本大小（使用ems），大多数浏览器允许您使用组合键进行更改。（比如ctrl +“+”）。花费大量精力进行缩放确实听起来像是为了获得很多奖励而付出很多努力。

Answer 2

您可能希望查看响应式网页设计。 This article引导您完成使网页响应不同屏幕分辨率的过程。它不是关于扩展，而是适应。希望它有所帮助。

Answer 3

其中一种方法是使用CSS transform属性。旧浏览器不支持此CSS功能。

/*Basic syntax:*/
transform: scale(2); /*width and height times two*/
transform: scale(2, 3); /*width times 2, height times three*/
transform: scaleX(2) scaleY(3); /*Same as above*/

要支持尽可能多的浏览器，您必须定义-moz-transform，-webkit-transform，-o-transform，-ms-transform和transform名称：

-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);

编辑，可以轻松实现转换功能：

var scale = 2; //Dynamic calculations resulted 2
var scaleCSS = ["-moz-", "-webkit-", "-o-", "-ms-", "", ""]
              .join("transform: scale("+scale+");"); /*Less error-sensitive*/
document.body.style.cssText += ";" + scaleCSS;

/*The RE below is similar to this one: /;\s*((?!text-)[a-z-])*transform:/i
  This RE is needed to prevent "text-transform" from matching */
if(!/(;\s*(-moz-|-webkit-|-o-|-ms-|)transform:)/i.test(document.body.style.cssText)) {
    /*the browser doesn't recognise any of the CSS features
      Go to another, probably CPU-consuming JavaScript method
     *Or redirect the user to one of the pre-styled pages */

}

Answer 4

有适合您浏览器的百分比...请查看960 Grid和Using percentages

就个人而言，我会远离闪光灯

Web开发 - 完全“可扩展”的网站没有闪存，可能吗？

4 个答案: