I am using media selectors in my css:
#media all and (orientation:landscape) { /* etc */
I test layout in Safari, and then the iPad simulator.
But Safari seems fixed in landscape. How to tell Safari my media should be portrait?
That is so that I can test the layout when the orientation is landscape.
I found a media property of a styleSheets object, see
http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-MediaList
but, at least in Safari or the iPad simulator, that list is empty. So adding a new media string to the list probably isn't the answer.
I tried setting width and height in the viewport meta tag to a hasty portrait shape:
Nope. media is still landscape orientation.
Argh, i do not want to make special testing versions of the css.
Related
I am using the Flickity slider (from Metafizzy) in a landing page to show different products. The slider is in portrait size and not landscape.
The issue is that when the user only scrolls the top portion of the slider into the viewport on mobile (i.e. 20-30%) and they attempt to scroll/swipe the slide, the screen suddenly jumps to attempt to include the whole slider into the viewport.
This never happens on the mobile emulator on the desktop, but only on the smartphone device on safari and google chrome browsers
Is this intended to be a specific behaviour for the Flickity slider? Like I should not be using it to make portrait sliders? I've gone through the plugin options and not able to fix this behaviour. It never came up in early testing with dummy content.
I've provided a link to the github page where it is happening, you can open it up in mobile browser and see the viewport "jumping" bug when you attempt to scroll the table. https://true-digital-channel.github.io/Galaxy11-Preorder/build/mobile.html
Disable the keyboard accessibility by setting accessibility: false in the carousel options. From the Flickity issue tracker.
I have notice a strange behaviour executing a simple test for my app.
The app is running on a tablet device.
In portait mode, before rotation, i have the correct font size.
I rotate the device in landscape mode and the app is stretched correctly
I rotate again the app in portrait mode but the font size is
decreased.
Somebody know why this happen?
How can I avoid this behaviour.
I'm going crazy for 3 days without found a solution
EDIT
Testing the app with another device (8' display), the problem is still present.
The problem is present too testing the app with visual studio simulator !!
I don't think is a code problem because my app has 4 pages with 4 different
ListViews and the problem is present in all pages.
I notice that the font size change when the device is rotate for the first time from portait to landscape.
The destination FontSize in landscape mode could be accettable, but when in portrait mode i need (is a customer requirement) to go back with the original Font Size
I have created a website using Bootstrap 3 and media queries.
This is my basic .css media query setup, using the mobile first approach.
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
In addition I have this meta set for Mobile viewport optimization in index.html:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
When rezizing my browsers chrome and firefox, all the breakpoints works as expected.
For mobile, both portrait and landscape, the mobile version is showed.
But while testing the web site on a Samsung Galaxy Tab and a Ipad, I only get the full scale site.
Could it be that I am using the wrong breakpoints for tablets? Or something else? I am confused.. due to the fact that it works on mobile and in the browser!
-- EDIT 2 --
I did more digging on your full site. I recreated your site locally and used a new version of bootstrap CSS, changing the break point to 767 px. I then changed the breakpoints in your custom CSS to 767 px. There was still an issue loading on iPads, the full site was still loading.
Upon further research I noticed the CSS sheet that you are referencing on a CDN for "Bootstrap Gallery". The issue is with this file. This file mentions includes the media queries for bootstrap! After making the changed above and commenting out this file, the site loads in mobile form for iPads in Portrait.
<!-- Bootstrap Gallery -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
-- EDIT 2 --
-- EDIT --
Twitter bootstrap was intended to show the full screen site for Tablets. Note that small devices show the full menu while extra small devices show the mobile menu.
The break point set for small screens is at 768px - the width of the iPad in portrait mode - so the iPad renders as small screen. TO have the iPad render as an extra small device in portrait mode (with the mobile menu), change the min-width to 767px for the small screen break point.
https://github.com/twbs/bootstrap/issues/2155
-- END EDIT --
I'm curious if this happens in both the portrait and landscape modes for the tablets you are testing or ONLY in the landscape mode.
I would expect this to happen in Landscape mode with the standard Bootstrap settings as the width of an iPad is 1024x and the medium breakpoint for bootstrap is 992px. Note that the iPad falls into that Medium category and Medium shows the the full menu and not the mobile menu.
If you want to change the breakpoints you can also do this by setting up a custom bootstrap instance. Change the medium break point to somewhere around 1030px:
http://getbootstrap.com/customize/#media-queries-breakpoints.
The issue here is that people on smaller laptops will get your mobile menu if they don't have your website in full screen.
We are developing a responsive WEBSITE that has two views. One for tablets PORTRAIT : Ipad and Google Nexus and one for mobiles: Iphone and Samsung S3.
Google Nexus Portrait should also be on tablet view of the webpage.
These are the media queries used.
For MOBILE
#media only screen and (max-width : 768px) and (orientation : landscape), only screen and (max-width : 599px) and (orientation : portrait)
For TABLET PORTRAIT
#media only screen and (min-width : 600px) and (max-width : 1024px) and (orientation : portrait)
When we open the site in Google Nexus Portrait View, it shows proper tablet version of the site. When we click on input field, the virtual keypad is shown and the device goes into landscape mode.
So for the width of the device (600px) and landscape : mobile view is shown. Once we close keypad it returns back to Portrait and tablet view is shown.
Device going into landscape occurs because when keypad is shown the width of the screen becomes greater than the screen height. (As height got reduced because of keypad)
Do you have any solution to differentiate tablet and mobile? Or is there any work-around for this behavior of Nexus? (I am talking about web application and not native.)
Hello I fix that problem using the media queries for height #media (max-height: 615px){} , you can detect using height and width and try to fix your problem for me that work good.-
Add this webpage to your iOS7 home screen
Open it, and focus the input field (the keyboard pops up)
The text turns red, as the phone thinks it is in landscape mode
Is there any way around it? Or should we just blame Apple?
Note: This problem only occurs in app-mode, not in regular Safari browsing mode. And it worked fine in iOS6.
Code:
<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">
<style>
body {
color: blue;
}
#media (orientation:landscape) {
body {
color: red;
}
}
</style>
<body>
<h3>this text will go red when in landscape</h3>
<input type="text" />
</body>
This is clearly an iOS7 bug. In my application I found that I can reliably distinguish portrait mode from landscape mode even when focused on an input field with the on screen keyboard open using this media query:
#media only screen and (device-width: 768px) and (device-height: 1024px) and
(min-aspect-ratio: 4/3) {
/* landscape differences here */
}
I couldn't use orientation: landscape because the rule would get activated even in portrait mode if the keyboard is open.
I probably need a different rule for the iPhone but I haven't gotten that far yet.
The keyboard orientation bug effects some web browsers as well, not just app mode, but hopefully this can be used in either instance. It also seems to effect some Android devices.
Here's how I got around it for mobile web browsers:
#media only screen and (min-device-aspect-ratio:1/1) and
(max-device-aspect-ratio:3/2) {
/* Landscape-to-portrait corrections here */
}
The idea is that this query can only fire if a screen is either a perfect square or close to square, a scenario that pretty much only occurs when a keyboard is raised on touchscreen devices. The aspect ratio values I've used translate to between 1 and 1.5, so as an example a 16:9 screen has an aspect ratio of 1.7777778 (16/9) and would not be targeted. Once the MQ fires, you can re-style the effected elements. This doesn't fix the bug, it just conceals it.
If an OS doesn't contain the bug, this query will never fire, so if Apple fixes this, you don't need to change your code if you don't want to.
If a device is genuinely flipped to landscape mode, the aspect ratio only increases, and even moreso if the keyboard is raised, so the bug should never appear when a device is on its side.
To my knowledge, there are no devices with square/almost-square screens out there that would pick up this media query (at the time of writing), but please correct me if I'm wrong.
This has been tested on an iPhone 5s in Safari, Dolphin and Mercury browsers running iOS7, and in Chrome on an Android One X running Android 4.2.1 (which also experiences the same bug orientation bug with keyboards).
I also checked to see if it would fire on a Blackberry Bold 9780 (480x360), and it didn't. I don't quite trust this, as the resolution should have made it fall within the target range and it loaded the other MQs just fine, so perhaps it assesses the aspect ratio based around the physical size of the screen instead of the number of pixels. This is potentially an instance where the media query applies your bug solution to a screen that isn't experiencing the bug.
It's not perfect, but it got me out of trouble after a lot of headaches.
innerHeight is now affected by the keyboard being up in iOS7. If you check the innerHeight vs innerWidth with the keyboard up when the device is in portrait you will find that the innerHeight < innerWidth so maybe the browser's orientation check is as simple as that instead of using the device orientation straight up.