how to make style sheet for tablet and iphone

一世执手 提交于 2019-12-07 11:53:44

问题


I was thinking the link target on the stylesheet would make my css file only load when it loads on a tablet or iphone. But the elements I'm trying to hide are still there. Im currently using (media="handheld")

  <link rel="stylesheet" type="text/css" hrf="css/media.css" media="handheld" />

回答1:


There are too many mobile device models out there to write stylesheets for; you'd be better off adjusting your CSS based on Screen Size.

This is especially helpful for targeting Android Tablets which comes in different sizes.

See this useful tutorial for further explanation:

http://css-tricks.com/resolution-specific-stylesheets/

So, instead of targeting a specific screen dimensions (which would keep changing as more devices are released), you'd want stylesheets that change according to the screen size.

Then you'll add several stylesheets:

<link rel="stylesheet" media="screen and (min-width: 480px) and (max-width: 700px)"     href="css/small.css" />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)'     href='css/medium.css' />

etc.

So iPhones would use the small.css, and tablets larger than 700px will use medium.css.




回答2:


Handheld is more for devices like PDAs or feature phones than iOS or Android devices. You're much better off using media queries to detect device capabilities and then adjust accordingly. Here's an example article: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/



来源:https://stackoverflow.com/questions/12043983/how-to-make-style-sheet-for-tablet-and-iphone

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!