如何修复我的网站,使其能够在移动设备上运行?
我试图让我的网站在手持设备上调整大小,但由于某种原因它不响应样式表。 如果您查看此处:响应式设计链接 并将 www.sofiamillares.com 作为站点测试,顶部的线条被切断,所有东西看起来都超级大。
有人可以告诉我为什么要这样做以及解决它的最简单方法是什么吗?
I am trying to make my website resize on handheld divices but form some reason its not responding to the stylesheet.
If you take a look here: responsive design link and put www.sofiamillares.com as the site test, the top lines get cut off and everything looks super big.
Can some one please enlighten me on why is it doing that and what would be the easiest way to fix it?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
发生这种情况是因为您的设计并不完全流畅。
只有您的
container div
会随着宽度进行调整(一点)要快速解决此问题,您可以
为您的
div
提供百分比宽度,以便它们随屏幕缩放分辨率将您的方框浮动在底部,以便它们会堆叠在较小的屏幕上
考虑使用媒体查询或某些 js 设备检测来定位移动设备并向其发送修改后的 css 样式表。
在这里获取一些想法:http://mediaqueri.es/
This is happening because your design is not completely fluid.
Only your
container div
will adjust with the width (a bit)To fix this quickly, you could
give your
div
s percentage widths, so they scale with the screen resolutionfloat your square boxes at the bottom, so they will stack on smaller screens
consider using media queries or some js device detection to target mobile devices and send them a modified css stylesheet.
Get some ideas here: http://mediaqueri.es/
正如杰森(Jason)建议的那样,创建网站的移动特定版本通常是最佳解决方案。然后,您可以测试用户代理字符串中是否有“android”和“iphone”等短语,并将用户重定向到您的移动网站。有一些可用于 JavaScript 的库以及许多服务器端编程环境(PHP、ASPX 等),它们可以为您进行各种浏览器检测。
在构建移动网站时,您当然希望页面轻量级,以便它可以通过移动数据连接快速加载,并针对纵向的较小屏幕进行适当的格式化。
As Jason suggests, creating a mobile specific version of your site is usually the best solution. You can then test the user-agent string for phrases like "android" and "iphone" and re-direct the user to your mobile site. There are libraries available for JavaScript as well as many server-side programming environments (PHP, ASPX, etc) which do all sorts of browser detection for you.
When building a mobile site, you'll of course want to make the page lightweight so it'll load quickly over a mobile data connection, and format it appropriately for a smaller screen in portrait orientation.