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
Related
I have a slight problem with my application, which was done under ionic, in AngularJS.
The application launches and works very well under android, but on the iOS part, just after the splash screen, it gives me a black screen.
So I can access my index, which is a login page, I need to rotate the device, or that I orient it in landscape. After doing this, the application works very well, whether in portrait or landscape, I do not understand anything..
I would like to know what is happening, since on Xcode I tried everything ..
here is what I did, I even made it only in portrait, but nothing helps
Thank you for your answers.
I noticed this with separate html code, but I can repeat the same issue using the following url example of an html web app view, such as would be used in a hybrid app. To make it easiest for someone reading this to reproduce the issue, I will include that url here (I don't need to use that url. I have my own code. But this url does the same thing, so is a good example for someone reading this to examine.)
https://framework7.io/examples/tab-bar
Image: These bottom nav bar items do not respond to touch on iPhone 6s or 6s Plus, but DO work on 5s and SE
To reproduce:
Create a simple iOS App with a wkwebview (you may already have one from a previous project)
Simply ensure the webview loads the above url, and you will be able to observe the issue.
If a wkwebview in a Swift app loads the above url in an iPhone 5s or lower within a full screen wkwebview, the bottom tab menu (with choices for information, inbox, upload, and photos) will work. But if opened in iPhone 6s or 6s Plus, the bottom tab menu will not work. You can tap on choices, and nothing will happen.
Important: This is not in Safari. This happens in the context the link being opened in a wkwebview within a Swift app. This is repeatable.
I have checked the layer debugger, and nothing is in the way of the bottom tab.
Thank you very much.
I was going to just delete this, but you never know. Someone else may have the same question later. Maybe this will help them.
So here is the answer which I have just figured out:
I hadn't added auto constraints to ensure the webview would stay the same size as the window. That is why it worked on the smaller phones like the 5s and SE (because the webview happened to aready be big enough.) Meanwhile, the bigger screens of the 6s and 6s Plus were beyond the size of the webview.
I saw it in storyboard and added constraints to ensure the webview would stretch to however big the screen was, and everything started working. The lower nav bar was no longer out of reach of my taps.
I do think it's odd that the content displayed on the entire screen, but only the area which detected touches did not extend to the screen, but that is an opportunity for me to examine the code and see how things are arranged.
The main issue has been solved.
I have a responsive website which i tried adding in uiwebview. When testing in the simulator with iphone 5 it displays the website correctly, but when displaying on iphone 6 it leaves about 20px blank.
I have trief different solutions like here; UIWebView dones't resize correctly when orientation change?
But without result.
Is there anyone who can help me on the way?
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....
When I look at my website on ipad peek portrait, it does not zoom out the appropriate size. It may be that my design does not allow for enough fluidity. I am confusing, however because it did seem to work at some point.
Please see http://www.nogginusers.com/libermanproperties/libermanproperties.html
and a standard media stylesheet for ipad portrait