This question already has answers here:
Screen orientation ios
(2 answers)
Closed 7 years ago.
Throw JQuery Mobile is there are any way to show the Page in Landscape by code,
I don't want to use orientationchange but I want to fire it Programmatically!
Any help,
No, You can't do it
But, Try to add some layer over when user using mobile & portrait by using CSS
Something like...
HTML :
<div class="locked"></div>
CSS :
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: portrait)
{
.locked {
width:100%;
height:100%;
position:fixed;
background:rgba(0,0,0,0.8);
z-index:9999;
}
}
So style this layer whatever you want, example some arrow or fake your website screenshot or fake css transform rotate, Just for let users change orientation :P
Demo : http://jsfiddle.net/cpJgT/show/ Try on your mobile
Related
I need a responsive date picker for travel site. I've tried lots of Google searches but can't find any responsive date picker except pickadate.js but I want to show two months at a time...
I also tried to make the jQueryUI date picker responsive like:
#media (max-width: 480px) {
#ui-datepicker-div{ width:70%!important;}
.ui-datepicker-multi, .ui-datepicker-group {float: none!important;}
.ui-datepicker-multi-2 .ui-datepicker-group{width:100%!important;}
}
but the problem is the calender open in up direction; see the attached photo
#media (max-width: 622px) and (min-width: 1px){
#ui-datepicker-div{ width:90%!important;}.ui-datepicker-multi, .ui-datepicker-group {float: none!important;} .ui-datepicker-multi-2 .ui-datepicker-group{width:100%!important;} }#media only screen and (max-width: 622px) and (min-width: 1px) { .ui-datepicker-group-last{ display:none!important; }}
Try using this,
jtsage/jquery-mobile-datebox
OR
jQuery UI's Datepicker Styled for mobile
I have an iPhone 4. I know the resolution falls within the parameters of my styles. Yet I'm seeing my full-width layout on my smartphone.
Can I get a pair of fresh eyes to view source and let me know if I'm missing something obvious? It shows up in my browser but not on a device.
http://georgiaderm.com/mobile/
In my HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
In my CSS:
/* ---------------------------------------------------------------------- */
/* Media Queries
/* ---------------------------------------------------------------------- */
//* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width:1000px) {
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width:768px) and (max-width:1000px) {
body {padding:10px 4px; width:760px;}
}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width:768px) {
html {background:#fff; padding:10px;}
body {box-shadow:none; margin:0; padding:0; width:auto;}
body > nav {display:none;}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width:480px) and (max-width:768px) {
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width:480px) {
.alpha, .omega {float:none;}
.alpha > * {margin:10px auto;}
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width:320px) {
footer div {float:none; width:auto;}
}
edit: Simplified it.
While I'm here, anyone have a lightweight strategy for deactivating JS tabs on small devices?
I specifically define 0px on my media queries, for example:
#media only screen and (min-width:0px) and (max-width:1000px)
{
/* STYLES GO HERE */
}
Perhaps that will help?
Okay, while I didn't solve this mystery, I moved the mobile styles to the rest of the site and they suddenly worked. I guess I had something quirky going on with my CSS specificity on the mobile.css but once I moved the media queries over to my main.css, all is well.
Thanks for the help, all.
I've been doing some research about viewport issues in iPod and iPhone 4's Safari, but i can't find any answer on this matter.
There are several threads about issues going from portrait to landscape, but not from landscape to portrait.
The issue is the following:
I used to have the normal zooming issue when going from portrait to landscape so i added the tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
So that fixed that issue.
NOW, when I go back to portrait mode, the page I made gets streched and it renders with an added right margin. This makes the page wider, so you have to sweep to the left to get the original position of the page (thought it keeps the new 'right margin').
Sorry if there was someone that already answered this, but i just couldn't seem to find any response to this issue.
Let me know if some additional information is required.
Please keep in mind it's my first question :/
Thank you!
EDIT: I'm running iOS 6, and getting this issue. When i run my page on an iOS 5.1.1 it displays properly, so it might be a new version of the viewport bug that was fixed before.
I think you want to add this to your CSS or style block. (It was in this post)
html {
-webkit-text-size-adjust: none; /* Never autoresize text */
}
I found a workaround for this via jquery and css. I have no idea how effective it works, but it's an option that worked for my needs. Basically, add the #orient id tag to your body tag, and then make the .ios6-mobile class that has a max-width of the device that you are seeing an issue with. In my instance, it was for iphone size that are running ios6, so I had a max-width of 320px. Here is the jquery code.
jQuery
window.addEventListener("orientationchange", function() {
if(window.orientation == 0){
$("#orient").addClass("io6-mobile");
} else if (window.orientation !== 0){
$("#orient").removeClass("io6-mobile");
}
}, false);
CSS
#orient { /* Don't need any code. Just a helpful ID to pass to jQuery */ }
.ios6-mobile { max-width:320px /* change the width to whatever size your device is */; overflow:hidden; }
Hope this helps in some way!
This helped me to solve same issue
#media (max-width:640px) and (orientation: landscape) {
body {-webkit-text-size-adjust: 100%;}
}
And for Retina display bug
#media (max-width:640px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio:2) {
body {-webkit-text-size-adjust: 70%;}
}
My jquery mobile page is WAY to zoomed out. I have tried everything I can think of, but I cant get it to zoom in.
This is the last thing I have been trying:
.ui-mobile-viewport {
max-height: 440px !important;
max-width: 500px;
}
How do you zoom in a page? I just want the page to fit normally on the phone
I believe you are looking for the viewport meta tag: http://davidbcalhoun.com/2010/viewport-metatag
EDIT:
Perhaps I don't fully understand the problem, but maybe you could try to fix it within the following CSS #media queries:
#media all and (orientation:portrait) {
/* set some widths maybe? */
}
#media all and (orientation:landscape) {
/* second verse same as the first */
}
Finally, if I'm still off base, do the answers here help? How to set viewport meta for iPhone that handles rotation properly?
I'm building an iPad magazine for a University project in the form of a web site to demonstrate some of the functionality of my proposed design (the real-life app would of course be native iOS)
I have looked at some frameworks like Sencha which seems overkill for what I want and seems to want to do everything inside JavaScript instead of keeping it to HTML/CSS and then adding the interactions on top. I have also looked at jQuery UI iPad which seems the most promising but I could do with some help getting it to work. Here is a demo of it working: http://jsfiddle.net/blackdynamo/yxhzU/
Here is a sample page for my pages: http://driz.co.uk/ipad/
What I need help with is getting the DIVS to sit next to each other in rows and then add the interaction whereby as a user swipes left, right and up and down it will jump between the different DIVS as though they are pages/sections of a magazine.
Here is a image that shows how the DIVS would ideally be arranged, so a user could move between the sections going left and right and then scroll inside that section by scrolling up and down. http://driz.co.uk/ipad/plan.png
Can anyone help me get this working? THANKS LOADS!
#media only screen and (device-width: 768px) {
/* For general iPad layouts */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
I am not entirely sure with the divs, sorry. Hope this helps.