my question is about Twitter Bootstrap 3 - i'm using the Download Version from "getbootstrap.com", not the less/scss version.
I would like to disable only 1 media query (iPad Portrait).
Does anyone know, how to disable the Media-Query for iPad Portrait?
I would like to usw iPhone Media Query, on iPad Portrait i would like to zoom out the Browser so i can see the "md"-Version (Medium Desktop).
Or is it only possible via JavaScript (Changing Viewport an Zoom),
then i would try it this way - but i think there are a better solution, via CSS and Media queries.
best regards
Related
I am building an app mainly for tablet or iPad, but I just noticed that the design is meant to only for landscape view. I tried the portrait and it doesn't look good. Though before I keep programming the app I want to know how I can handle this, or prevent the user to see the app in portrait.
I checked and I know that for android I can use something like this:
android:screenOrientation="sensorLandscape"
but what about iPad?
I would like to have something more "universal" if I can say
I am using HTML5, JQuery and to handle the swipes I am using Hammerjs nothing else, I didn't use any mobile framework, cause it's more of a carousel with some text and images.
on iOS it's a simple configuration in the Xcode App Target, where you just allow Landscape Left and Landscape Right.
if you are using UIKit for building the app, you can configure it for every instance of UIViewController
UPDATE: (Solution for HTML)
combine the css rule "transform: rotate(90deg)" with css media queries on device orientation, but it will be tricky to get everthing to run properly....
I am using Bootstrap3 css/js files to make my html page responsive for all kinds of screens (iphone, android, tablets, ipad, desktop).
It works fine on desktop and mobile devices but it's not 100% correct on iPad/Tablet. There are 2 issues with iPad/Tablet:
1. Responsive image for Tablet/iPad is still not fit to screen
2. font size of the text is small
Is it default behavior of Bootstrap3 or am I missing something?
From my understanding, ipad 2 and maybe 3 had a screen resolution of 1024 whereas ipad 4 has double that.
iPad will still however zoom in to your site and ideally you want your site to look and behave a certain way if it's being viewed on a tablet.
How do you effectively target both these devices using media queries?
#media only screen and (max-width:1024px)
This however won't cover ipad 4?
Yes, they have different resolutions. We have to target particular mediaqueries to handle this. I suggest you to read this article.
I am building a website using the twitter bootstrap base so that i can have a site that works on the ipad and also touch phone devices.
So far my site looks great in all browsers, PC ipad and phone however ipad only works fine in portrait. When in portrait it has the lovely button in the corner which opens the expanding menu.
I want this to work on the landscape one too but can't seem to get it to work.
Could someone please advise me whereabouts in the CSS I need to look and also if possible what screen size I am looking for to make the collapse bar appear in landscape.
Answering my own question.
Just incase anyone else has the same problem:
iPad screen resolution is 1024 x 768 so in landscape mode it renders like a full web page.
There are ways to overcome this by detecting the device's browser user agent.
For more information see this:Checking iPad user agent
Wondering if anyone has had any experience using retina assets with the NativeControls iPhone plugin for tabbars? Using the plugin it's possible to set custom images for each tabbar button, but anything above 32x32px (from memory) becomes distorted. 32x32px icons are fine, but viewed on iPhone 4 retina display look pretty bad.
Somebody has a solution for this?
Not a phonegap specific issue, you just need to create a high res icon for the retina display, as well as the normal resolution. You can read about that in the docs here http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html
img.png
img#2x.png