如何为设备使用正确的 CSS
我正在创建一个网站,我应该为不同的设备(pc、ipad、iphone)使用不同的 css 有可能知道人们使用哪种设备来选择CSS???
i'm creating a site and i should use different css for different device (pc, ipad, iphone)
it is possible to know which device people use to select the css???
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
根据媒体类型加载不同的 CSS:
W3C -Media Types
Load different CSS based on the media type:
W3C -Media Types
关于用户查看网站的平台/设备的最佳信息是浏览器版本,可在 HTTP 标头中找到。移动设备可能会说他们正在使用 Chrome(在 Android 手机上)或 IE(在 Windows Mobile 手机上),但您应该能够从版本信息中发现它是移动版本的浏览器。
您可以使用 JavaScript 动态设置样式,或使用服务器端脚本(ASP、JSP、PHP)加载 CSS 脚本。您必须使用的内容取决于您的网站是用什么语言编写的。请注意,让移动设备运行大型 JS 脚本来动态设置样式在移动设备上的性能不会很高。
The best info you have on what platform/device your users are viewing the site on is the browser version, available in the HTTP header. Mobile devices may say they're using Chrome (on an Android phone) or IE (on a Windows Mobile phone), but you should be able to discover from the version information that it's a mobile version of the browser.
You could use JavaScript to dynamically set styles, or a server-side script (ASP, JSP, PHP) to load CSS scripts. What you have to work with depends on what your site is written in. Be aware that making the mobile device run a large JS script to dynamically set styles will not be very performant on a mobile device.
如果@Justin Niessner 的答案没有提供足够的精细控制,您可以尝试从用户代理字符串中检测浏览器/设备。这遭到了一些人的反对,并且不能保证它是准确的,但它可能会有所帮助。基本上,用 Javascript 检测浏览器,然后动态添加正确的样式表。或者,这可以在服务器端完成。
If @Justin Niessner's answer doesn't give enough fine-control, you could try detecting the browser/device from the user agent string. This is frowned upon by some people, and it's not guaranteed to be accurate, but it might be helpful. Basically, detect the browser in Javascript and then dynamically add the correct stylesheet. Alternatively, this could be done server-side.