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.-
Related
I am Working on a sample application. I've designed my app based on View Container. By using the below cases i designed my app in Portrait Mode for mobile Phones(iOS/Android) and also Designed both Portrait and LandScape Modes for iPad/Tablets.
In Android I followed this Case in
React-native Android Set only Portrait Mobile Phones Otherwise tablets shows landScape and Portrait
In iOS I followed this case
In iOS just set in Xcode -> general -> Development info -> Device Orientation and select Portrait for iPhone and Portrait , LandscapeLeft and LandScapeRight for iPad.
Now i want to Design splitView for both iPad and Tablets in both Portrait and Landscape modes. I've searched on google but don't find any information. I would like to know how can i design it(Split View) in both Android and iOS.
Wix's react-native-navigation provides a native extension to SplitView, but not for Android. (https://github.com/wix/react-native-navigation/blob/master/docs/docs/layout-types.md)
I have not tried the react-native-split-view package (https://www.npmjs.com/package/react-native-split-view) but it reports to work on iOS and Android.
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.
I´m trying to set media querys for the ipad and for mobiles and I don´t know where I go wrong.
If I have the below iPad query at the top, then the iPad works, but in the iPhone it is displaying the iPad query?
and if I have the iPhone query before the iPad, then the iPhone works and not the iPad.
So whatever media query is first, thats the one working!?
default styling at the top...
#media only screen and (max-width : 768px) {
iPad styling goes here....
}
#media only screen and (min-width : 320px) and (max-width:480px;){
iPhone styling goes here....
}
Any input appreciated, thanks!
I have this in the page that uses it, maybe I have to have it in a separate css file?
I have to test!
Update, no it didn´t matter!
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.
The app uses a UISplitView and it always opens in portrait mode. If the iPad is held horizontally it will open in portrait mode and then rotate to landscape. I'd like it to just open up in landscape mode without needing to rotate. Any ideas>
In Info.plist, set UIInterfaceOrientation to UIInterfaceOrientationLandscapeRight (or Left). See the Information Property List Key Reference for more details including how to have different orientations for iPhone versus iPad.