I have the following CSS:
#media screen and (orientation:portrait) {
body {
background-image: url(../img/background.jpg);
background-size: auto 100%;
}
}
#media screen and (orientation: landscape) {
body {
background-image: url(../img/background.jpg);
background-size: 100% auto;
}
}
That works fine on every device except iPhone with iOS 6.3 and smaller (works fine with iOS 7)
On iOS 6 while switching from portrait to landscape, the landscape screen is only covered half way by the background img, any idea why that is?
After doing some research I found the bug.
In the "meta" tag if you specify the "height" property, the view will NOT cover the whole width in Landscape mode.
Bad Code:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1.0, minimum-scale=1, width=device-width, height=auto, target-densitydpi=device-dpi" />
Good Code:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
Related
For some reason, the iPhone 5 doesn't change the layout of my site when it is rotated from portrait to landscape or visa-versa. So, if the page is loaded in portrait view, the portrait media queries I have defined kick at and adjust the site, but then if it is rotated, the layout stays optimized for portrait view. If I manually refresh the page though, the landscape view loads, but won't change to portrait if the phone is rotated, unless it is refreshed again.
Here is the basic code from my CSS document:
/* Normal CSS for Desktop Site*/
#media only screen and (orientation:landscape) and (max-device-width: 568px), (max-width: 568px){
/*iPhone 5 Landscape Styles */
}
#media only screen and (orientation:landscape) and (max-device-width: 480px), (max-width: 480px){
/*iPhone 4/4s Landscape Styles*/
}
#media only screen and (orientation:portrait) and (max-device-width: 320px), (max-width: 320px){
/*All iPhones Portrait Styles*/
}
And this is from the <head> of my HTML files:
<!-- WEB APP META -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link href="/img/webapp/default-iphone5.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/img/webapp/default-iphone#2x.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link rel="apple-touch-icon" sizes="114x114" href="/img/webapp/touch-icon-114.png" />
This issue only happens on the iPhone 5. The media queries work as expected on other iPhones. I've searched around and messed with the code, but nothing seems to be working.
The website link is here if you want to take a look. Note: Only the home page works
Thanks in advance.
This is how you style media for iPhone 5
iPhone 5 in portrait & landscape
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) { /* STYLES GO HERE */}
iPhone 5 in landscape
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { /* STYLES GO HERE */}
iPhone 5 in portrait
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) { /* STYLES GO HERE */ }
You've to remember comma.
#media only screen
and (min-device-width : 320px),
and (max-device-width : 568px),
and (orientation : portrait) { /* Style*/ }
Otherwise we're still at the same place were we stareted and wondering how it's poissible D:
Here is a problem. I am using a draggable image in UIWebview. The Source code: here:http://ios-blog.co.uk/tutorials/rich-text-editing-a-simple-start-part-7/
It simply disables the scrolling during drag and reenable it when the dragging is completed.
It works perfectly fine when UIWebview is first brought up and hereafter. As soon as the edited text length is longer than the screen. UIWebview ignores the scroll setting of its scrollview and re-enables the scrolling.
The way I disable the scroll view is using this:
webview.scrollview.scrollEnabled = NO;
Please tell me where I was wrong. Much appreciated.
This problem is caused because of the following wrap placed within the html file I loaded as a template editing section.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
<style type="text/css">
html, body {height: 100%;}
body {
margin: 0;
}
#wrap {
height: 100%;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#content
padding: 10px;
}
</style>
Any div wrapped with this block will always allow itself to be scrolled.
Deleted it and things turned out to function properly again!
may use
for(UIView *aView in webview.subviews){
if([aView isKindOfClass:[UIScrollView class]])
aView.scrollEnabled = NO;
}
this makes sure that any scrollview's scrolling is disabled.
I have strange issue when loading a site within iframe of my mobile application. I am having a website with seven pages. When I browse my website url in iphone's safari. The content in all the pages are rendering perfect. but if I load the website in a iframe inside my mobile application the android renders the website correctly inside iframe of mobile application. But in iphone three of the pages the content get overflowed and I can't see the full page. My media queries are listed below. By the way I am using bootstrap framework for my website.
#media (min-width: 768px) and (max-width: 979px) {
// css goes here
}
#media (min-width: 768px)
{
// css goes here
}
#media (max-width: 767px) {
// css goes here
}
#media (min-width: 1200px) {
// css goes here
}
#media (min-width: 768px) and (max-width: 979px) {
// css goes here
}
#media (max-width: 767px) {
// css goes here
}
#media (max-width: 480px) {
// css goes here
}
#media (max-width: 320px)
{
// css goes here
}
#media (max-width: 240px)
{
// css goes here
}
#media (max-width: 979px) {
// css goes here
}
#media (min-width: 980px) {
// css goes here
}
Is there any other media queries targeting the iframe inside mobile application of the iphone. I am new to this responsive mediaqueries. Please help. As I am meeting the client's deadline in two days I have to solve this issue.
Thanks in advance.
Sometimes browsers don't render the mediaqueries features. Try this adding into your head section. May be you get some luck.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
What im trying to achieve is a media query that will work only on all smartphone on portrait orentation
I was using so far this one, but it isnt working in iPhone 5. Why is this?
#media only screen and (max-width:800px) and (orientation: portrait){
aside{ display: none;}
}
iPhone 5 display resolution is 1136 x 640 pixels. Measuring 4 inches diagonally, the new touch screen has an aspect ratio of 16:9 and is branded a Retina display with 326 ppi (pixels per inch).
Try:
#media only screen and (min-width: 560px) and (max-device-width: 1136px) {
aside{ display: none;}
}
All mobile screens in portrait:
In CSS:
#media only screen and (max-device-aspect-ratio: 1) and (orientation: portrait) {
aside{ display: none;}
}
Small mobile screens in portrait with explicitly set viewport width:
Declare this scaling mode in HTML <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In CSS:
#media only screen and (max-width: 479px) and (max-device-aspect-ratio: 1) and (orientation: portrait) {
aside{ display: none;}
}
All mobile screens in portrait with default viewport width (980px):
Note: It has become standard practice in modern web design to define your viewport width instead of leaving it at the default 980px. It is integral to Responsive Design. I strongly suggest taking some time to learn about it.
In CSS:
#media only screen and (width: 980px) and (max-device-aspect-ratio: 1) and (orientation: portrait) {
aside{ display: none;}
}
I have tried the different combinations of width & device-width but on the iPhone in landscape this code never turns the background red;
I am having problem when I have more than 1 media query. See this JSfiddle example the div background is never green unless you remove the last media query
This is what I would like 3 different media queries which target:
both smartphones and tablets(portrait only). This will be where I have all my generic styles for responsive layout
width: 320px - 479px - this will apply to small screens, such as iphone in portrait only
width: 480px - 640px - this will apply to larger screens such as iphone in landscape and ipad in portrait. Not ipad in landscape.
Note this is for a HTML email so its not possible to use JS.
#media only screen and (max-width: 640px) {
body { padding: 10px !important }
}
/* Small screen */
#media only screen and (min-device-width: 320px) and (max-device-width: 479px) {
body { background: blue !important }
}
/* iPhone landscape and iPad portrait */
#media only screen and (max-device-width: 480px) and (max-device-width: 640px) {
body {
background: red !important
-webkit-text-size-adjust:none;
}
}
Reference: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Your own attempt modified
#media only screen and (max-width: 640px) and (orientation: portrait) {
body { padding: 10px !important }
}
/* Small screen */
#media only screen and (min-device-width: 320px) and (max-device-width: 479px) and (orientation: portrait) {
body { background: blue !important }
}
/* iPhone landscape and iPad portrait */
#media only screen and (max-device-width: 480px) and (orientation: landscape),
#media only screen and (max-device-width: 640px) and (orientation: portrait) {
body {
background: red !important
-webkit-text-size-adjust:none;
}
}
Media queries also support device orientation. You should try that
#media screen and (orientation:portrait) {
/* Portrait styles */
}
#media screen and (orientation:landscape) {
/* Landscape styles */
}
You can also combine them with width like so
#media screen and (max-device-width : 320px) and (orientation:portrait) {
}
Take a look at this resource, will give you media queries for pretty much everything http://arcsec.ca/media-query-builder/ , you need to be be specifying a min width aswell. also less of the !important, dirty :)
in your case
#media only all and (min-device-width: 320px) and (max-device-width: 480px) {
/* insert styles here */
}
Responsive emails can be tough because there are so many e-mail clients out there, and support can be limited for media queries. You may just want to look into making your divs fluid with percentages, so they scale, rather than media queries. The people at zurb have some great templates which may help out too. http://www.zurb.com/playground/responsive-email-templates
Hope that helps.
i tried this by using Om's solution in a diff. way it worked for me, hope it helps someone
#media only screen and (max-device-width:1024px) and (orientation: portrait) {
/*style*/
}
#media only screen and (max-device-width: 1024px) and (orientation: landscape) {
/*style*/
}