如何让我的 HTML 页面针对移动用户自动调整？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11127920/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make my HTML page automatically adjust for mobile users?
提问by mdivk
Is there a simple way to make an HTML page automatically adjust for mobile phone users? My page: http://www.xiexianhui.com/baxjoomla15/index0.htmlapparently doesn't fit into my sony xperia ray phone.
有没有一种简单的方法可以让HTML页面自动适应手机用户？我的页面：http: //www.xiexianhui.com/baxjoomla15/index0.html显然不适合我的 sony xperia ray 手机。
回答by kremalicious
You should first take a look at the concepts of Responsive Web Design. There's just too much and this question is too generic to answer everything. But in a nutshell it requires 3 components:
您应该首先了解响应式网页设计的概念。太多了，这个问题太笼统了，无法回答所有问题。但简而言之，它需要 3 个组件：
- Media queries, to deliver different css styles to different screen sizes.
- Fluid css grid, so the site's layout adapts automatically to the screen's size.
- Flexible images, so all images scale down fluidly so they don't overlap the content container.
- 媒体查询，为不同的屏幕尺寸提供不同的 css 样式。
- 流畅的 css 网格，因此站点的布局会自动适应屏幕的大小。
- 灵活的图像，因此所有图像都可以流畅地缩小，因此它们不会与内容容器重叠。
If you just want to have your site render in full on the phone's screen you would have to use the viewport meta tag. Put this in the <head>of your page:
如果您只想让您的网站在手机屏幕上完整呈现，则必须使用视口元标记。把它放在<head>你的页面中：
<meta name="viewport" content="width=device-width">
and your page will fully fit the screen. But you'll notice now everything is exceptionally small and not usable. Responsive web design is the solution for that.
并且您的页面将完全适合屏幕。但是您现在会注意到，所有东西都非常小且无法使用。响应式网页设计是解决方案。
回答by mistahenry
To piggy-back on what's already been said: WURFL, http://wurfl.sourceforge.net/, the Wireless Universal Resource FiLe, is a Device Description Repository (DDR), i.e. a software component that maps HTTP Request headers to the profile of the HTTP client (Desktop, Mobile Device, Tablet, etc.) that issued the request.
背负已经说过的内容：WURFL，http: //wurfl.sourceforge.net/，无线通用资源文件，是一个设备描述存储库 (DDR)，即一个将 HTTP 请求标头映射到配置文件的软件组件发出请求的 HTTP 客户端（桌面、移动设备、平板电脑等）。
One shortcut: Prepare 3 different layouts that will cover basic old phones, new colorful phones and the high-level features phones and PDA's. This is a fairly simple task and at the same time offers great results. I'd give this link a look as well. http://mobiforge.com/developing/story/introduction-wurfl
一个捷径：准备 3 种不同的布局，涵盖基本的旧手机、新的彩色手机以及高级功能手机和 PDA。这是一项相当简单的任务，同时提供了很好的结果。我也会给这个链接看看。http://mobiforge.com/developing/story/introduction-wurfl
