Hi,
I have developed a html5 page which i want to fit to the size of IPAD(ios7) device.
Using the safari browser when i run the URL it is not able to take the shape of device orientation.
we are using media Queries to fit the size of the device. It seems media queries does not support IOS7 ?
Pls suggest.
Thanks
vijay
Safari in iOS 7 does support media queries just fine on both iPhone and iPad. The caveat being that the resolution on an iPad is quite large and your media queries and orientation may not be accurate to the iPad.
What do your media queries look like?
Something like this would apply to an iPad.
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
Just to clarify, that resolution is for an iPad 2. Newer iPads have larger resolutions so its best to just let them render the full desktop version.
If you need to be more specific you can use the orientation property, as only mobile devices have that.
Hi Phil,
Thanks for the update....
I'm facing one more issue.
Unable to identifiy the iPad device(iOS7) orientation.
i tried with window.orientation and window.resize(both javascript and JQuery)
no luck here.
could you please suggest me the way to capture the same on device tilt.
Thanks
vijay
Not sure what you mean. The media query will address the orientation issue on its own.
Why are you trying to use JS to identify it?
orientation:portrait
orientation:landscape
Currently using Media Queries we are not able to achieve the device(ipad7) orientation. if possible, pls let me know how to achieve the same.
Please let us know how to set the device width/height from the .js file for the application(HTML file).
Thanks
vijay
Again, not sure what is is you are trying to achieve. Media Queries define CSS style sections for certain criteria only.
In the case of an iPad a Media query like this would target the iPad in Landscape mode, as well as any other device who's browser supports the media query.
@media screen and(orientation:landscape)
{
...
}
while this would target it in Portrait mode.
@media screen and(orientation:portrait)
{
...
}
its up to your CSS in those sections to adjust your website to those dimensions or present different things depending on orientation.
For instance this HTML and CSS code will show which orientation the device is in by showing and hiding a div through a media query that detects orientation.
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile Device Orientation with Media Queries</title>
<style type="text/css">
div.orientl
{
background-color:#f2f2f2;
padding:10px;
font-family:Arial,"sans serif";
display:none;
}
div.orientp
{
background-color:#464646;
padding:10px;
font-family:Arial,"sans serif";
color:#ffffff;
display:none;
}
@media screen and(orientation:portrait)
{
div.orientp
{
display:block
}
div.desktop
{
display: none;
}
}
@media screen and(orientation:landscape)
{
div.orientl
{
display:block
}
div.desktop
{
display: none;
}
}
</style>
</head>
<body>
<div class="orientl">
<h1>Landscape</h1>
</div>
<div class="orientp">
<h1>Portrait</h1>
</div>
<div class="desktop">
<h1>Desktop Browser or no Orientation determined</h1>
</div>
</body>
<html>
Does IOS7 support Media Queries
