Question

我该怎么办才能让我的网站适合不同的屏幕..例如32“24”17“显示器以及带有9” - 11“屏幕的移动设备（上网本等）和手机在2.5“ - 5”屏幕之间的任何地方？

我应该如何设计我的主页/模板的布局等。我应该记住什么...我需要这个css，javascript或服务器语言才能读取设备的类型？

您希望建议的任何其他建议，以使网站可供各种类型的设备访问和使用。

提前感谢您的帮助。

Answer 1

没有必要编写js，你只需使用CSS即可。在meta中，我们定义网站根据设备的视口进行调整。如果你想改变设计，那么为你想要改变的东西写下不同的css，例如：

用于移动设备

<meta name="viewport" content = "user-scalable=no, width=device-width" />'
<link rel="stylesheet" media="all" href="stylesheet/iphone.css" type="text/css" />;

用于调整窗口大小

 <link rel="stylesheet" media="all (min-width=960px)" href="stylesheet/iphone.css"
 type="text/css" />;

<link rel="stylesheet" media="all (max-width=960px)" href="stylesheet/iphone.css"
 type="text/css" />;

有关详细信息，请参阅这些链接的http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes，http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm

Answer 2

没有任何个人消息，但此处移动网页设计问题的大多数答案仅针对iPhone或Android。 移动互联网不仅仅是iPhone或Android。有许多设备（实际上比iPhone和Android放在一起）不了解视频端口或媒体查询并在移动互联网上活动

如果您希望尽可能多地访问设备。

设计轻量级页面
不要使用水平布局。比如彼此相邻的2-3个盒子。让一切都垂直，以便它们适合小屏幕
不要使用繁重的java脚本，尽量避免使用
不要使用太多图片
避免在你的css中使用min-width和/或max-witdh

不同设备的网站设计？

2 个答案: