Creating style specifically(Link to style sheets for Ipads) for iPad tablets, iPhones, and Phones based on the Android operating system requires specialized coding. We cannot simply specify the handheld media type when you link to your CSS as described in “Link to media-specific style sheets.”
The Ipad, iPhone, and android os web browsers ignore the handheld link and instead behave more like browsers on traditional computers they load style sheets specific to the screen media type. However, you can create style sheets specific to the browser on the theses devices by checking the maximum width of the device screen.
Link to style sheets for Ipads and Phones
Step 1: Create an external style sheet with rules specific to the iPad.
Step 2: Link to the style sheet in your document using the <link> tag.
Step 3: Within the <link> tag for one of the style sheets type media=”?”, replacing? with only screen and (Max-device-width:1024px).
Step 4 Create a style sheet with rules specific to the iPhone and Android phones.
Step 5: Link to the style sheet in your document using the <link> tag.
Step 6: Within the <link > tag for one of the style sheets type media =”?”, replacing? with only Screen and (max-device-width:480px).
Result output
<!DOCTYPE html>
<html>
<Head>
<Title>Coding thai</Title>
<link rel="Stylesheet" type="text/css" href="Ipad-style.css" media="only screen
and (max-device-width:1024px)">
<link rel="Stylesheet" type="text/css" href="style.css" media="Print">
</Head>
<body>
<h1 id="Heading">Types of Web Developer</h1>
<h2>Fontend Developer and Back-end Developer</h2>
<hr>
<p>A front end developer has one general responsibility: to ensure that
website visitors can easily interact with the page. Back-end developers
are the experts who build and maintain the mechanisms that process data
and perform actions on websites.</p>
<hr>
<small> ©Copyright 2022 Codingthai</small>
</body>
</html>What should I keep in mind when optimizing a page for a mobile device such as the iPhone?
Key things to consider are that you are designing for a smaller screen, navigation by touch, and slower download speeds. you should consider increasing the font size to make the text more legible and the link easier to tap; turning off the display of larger images to reduce the page download time, and disabling CSS float style to convert multicolumn layouts into single-column layouts which can be easier to view on a smaller screen.
Is there a way to make CSS rules specific to a media type?
Yes, the steps described loading an entire external style sheet based on the media type. To limit a specific CSS rule to the media type you can use the @media directive and surround the rule with an additional set of brackets:
@media only screen and (max-device-width:480px) {p.bigger {font size:16px;} }
The CSS code above sets the front size for paragraphs displayed on iPhone.
Follow us on Social Media For More
Facebook, Instagram, Pinterest