Website turns to landscape with keyboard - javascript

I've ran into an interesting problem. On my website I have two versions of navigation bar for mobiles - landscape and portrait. To detect these two I use CSS media orientation.
#media (orientation: landscape)
{
/* inline menu */
}
#media (orientation: portrait)
{
/* multiple rows menu */
}
However, when I open my keyboard page turns into landscape, because the actual page size becomes smaller. Can someone help me how to fix this? All I can think about is focus event on inputs, so whenever they're focused the portrait manu is turned on, but it would change the menu even on landscape.
Here's an illustrative image
Thanks!

If you check Media Queries W3C Recommendation
You will find this interesting sentence:
The ‘orientation’ media feature is ‘portrait’ when the value of the
‘height’ media feature is greater than or equal to the value of the
‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.
So, when the keyboard is opened, your page turn into landscape mode.
There are multiple ways to overcome this problem, you can
check this answer.

You should ignore the height/orientation completely. Something like this:
#media (max-width: 480px)
{
/* inline menu */
}
#media (min-width: 481px)
{
/* multiple rows menu */
}

Related

How to run a function automatically in JavaScript based on screen size

I'm doing responsive web design. When I shrink the screen down to tablet mode and click some buttons, certain CSS properties are applied(things are moved around and others are hidden). Then when I enlarge the screen back to its desktop size. I want the properties to go back to the desktop version. How would I achieve that?
The current behavior is that the effect of the button remains when I go back to the desktop screen ratio.
The expected behavior is that when I go back to the desktop screen ratio, the CSS for desktop applies.
You can access certain properties such as window.innerWidth which you can check to decide whether to run your function or not.
That's for JavaScript. If you want your CSS to be responsive to screen size, check media queries, for example:
#media (min-height: 680px) {
.someClass {
margin: 5px;
}
}
You can use CSS media queries.
#media screen and (max-width: 600px) and (min-width: 300px) {
/* CSS for screen width between 300 and 600px */
}
With JavaScript, you could listen for the resize event.
window.addEventListener("resize", function(e){
console.log(window.innerWidth);
});

How to detect screen resoluion without javascript?

In case i want to check user's device by its resolution(i.e 300x600px for mobile, 800x600px for tab, and 1024x768px for pc).
but, how can i get the user's screen resolution when their javascript is disabled?
or is there any other way to solve my problem?
You can use CSS media queries to apply CSS rules targeted at certain screen resolutions and orientations.
I dont think you need to create diffrent pages for eaxh reslolution juat use CSS media queries for adjust page according layout.
If you want diffrent page per resolution then you have to use some server side lib or function to detect browser resolution
#media should do it
By your specs:
#media (max-width: 799px) {
#import url("/uri/to/mobile.css");
}
#media (min-width: 800px) {
#import url("uri/to/tablet.css");
}
#media (min-width: 1024) {
#import url("/uri/to/desktop.css");
}

How to get an App made using JavaScript to autoresize for other Apple Devices?

I've created an app using Javascript / CSS and HTML, just a simple game, nothing special.. however, when I run the game in xcode (iphone5 simulator) it runs fine, no problems and on an actual iPhone5 device using the ad-hoc method via my Apple Dev Account, but when I try it on the iPad mini and iPad 3 the game only show's up in the top left hand corner inside a what can only be described as an iphone5 size screen. Question is, how using either JS, CSS or HTML do I tell the app (in xcode6) to resize to a device bigger than iphone5.. basically how do I tell the app to resize depending on device, I want to launch the game (hopefully!) for iphone5, 6 and all iPads of course.
I'm using xcode6 and iOS8
Many thanks in advance for any help given.
Would be happy to screenshare over Skype if this is easier to do? (Let me know)
The problem was iPhone has smaller width compare to iPad. You have develop an app for iPhone , so when u simulate it on iPad i only takes width upto 586px or 320px not all iPad width. This width can be adjusted by using media queries.
Add the following media queries with your stylesheet.
Use CSS media queries as follows
html
{
//default styles as you have used(for iPhone 5 as you said)
}
body
{
//default styles as you have used
}
.contianer(wrapper)
{
//default styles as you have used
}
//media queries for iPad
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{
/* STYLES GO HERE */
//use width upto 768px
}
//media queries for iPad mini
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)
{
/* STYLES GO HERE */
}
Use proper width upto 1024px to 768px as it can match with iPad and you can get your app viewable for iPad.
Go to this Link for iphone and ipad styles.

responsive tables in css

I am trying to make the following jsfiddle code work. Actually all is working fine, for server side i am using ColdFusion.
the values are appearing 6 in a row. the 6 is hard-coded in ColdFusion variables, so it splits the values in 6 and then next row.
Now i want to make this a responsive so it should work with tablets and mobile devices without much pain in the a****s
Here is the fiddle i had generated
http://jsfiddle.net/9arpxvga/
This needs a help in implementation of responsive design...
A Jquery, javascript solution will also work
You're going to be hard-pressed to find an objective solution to such a broad question. So, broadly: one of the many ways to implement responsive design is to write CSS media queries, targeting various screen sizes. Here's an example snippet taken from getskeleton.com (which might be worth checking out if you need a bare-bones responsive framework to get you started)
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {}
You'd just write new CSS (or override your css) for each of the screen sizes you're trying to target. (Nest your css within the brackets after each media screen). Hope that helps.

Redirection with CSS and Javascript - handheld devices

I have been trying to redirect based on screen size generically on all desktop and hand held devices and I guess media queries is quite an answer to it because when i detected screen size with javascript screen.width then different browsers returned me different screen size which was quite irritating that why is this happening. Well I need to know two things will the following code detect the screen as javascript did or it'll detect generically 100% accurate screen size? and if so how can i trigger a rediretion javascript code if the following css rule being becomes true?
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* iPhone, Android rules here */
}
You could use a framework like jQuery or Mootools to avoid browser inconsistencies.
I may have written something that does what you want: http://jsfiddle.net/aUW4N/

Categories

Resources