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.
Related
I have an existing Ruby on Rails 4 application and I have set up bootstrap within. The buttons, forms and other small things I've utilised have been great!
Now I am absolutely perplexed when it comes to bootstrap and responsive design. From what I've read, embedding bootstrap into your app should be responsive out of the box, but this doesn't seem to be the case (or maybe I'm doing it wrong).
In my application.html.erb head tag I have:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I've looked at this section on the bootstrap site, but I don't see how adding hidden/visible classes is going to help my case, especially when header/footer widths need to change when the browser gets smaller.
I've been doing stuff like this so far:
#media only screen and (min-width : 175px) and (max-width : 400px) {
/* styles here for 175px to 400px */
}
So what I've been doing is setting up my own media queries. Now my question is: IS setting up media queries necessary when using the bootstrap framework? I've had some OK success so far using my own queries, but it's very, very tedious: everything on my site looks pretty good when the browser is large, but when it gets small, everything goes to shit.
If anyone could offer some insight on this, it would be much appreciated. I feel like I'm making responsive design much harder than it ought to be.
Integrate bootstrap into your app does not mean your website become responsive. It depends on the elements and classes that you are using on your site. If you have lots of custom CSS classes then you will need to define your own #media query.
In this case, I think you should take a deeper look into your app to see if you are really using Bootstrap classes in all places. If you see strange behaviors on mobile devices, then it should be because of your custom CSS classes
If you look into bootstraps documentation, bootstrap 3 has a lot of css features which will help you to make your app responsive.
Grid System:
Bootstrap 3 provides you grid classes according to your device like: col-md-1(for medium size desktop), col-sm-1(for your tablet) ,col-xs-1(for your mobile) so if you want to resize a particular element according to your device you can give that element classes like:
<div class="col-md-8 col-sm-4 col-xs-2"></div>
Now this div will have different width depending on the device width.
Media Queries:
Bootstrap 3 use the following media queries in our Less files to create the key breakpoints in grid system.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
Media queries will be helpful if you want to change typography or want to override any style according to device
Images:
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
Responsive Utilities
For faster mobile-friendly development, use these utility classes like .visible-xs, .visible-sm etc for showing and hiding content by device. You can simply apply these classes to any element and they will be visible or hidden according to your device
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
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 am looking at using CSS Media Query to support multiple tablets (Android/iPad). Below is the Media Query which I have;
<link rel="stylesheet" media="only screen and (max-device-width:1024px)" href="css/tablet.css">
<link rel="stylesheet" media="only screen and (min-device-width:1024px)" href="css/desktop.css">
Now my assumption is most tablets are below 1024px width. Please correct me on this front. Any tabular comparision would be great.
Also any other approaches besides device-width for media query would be fine.
I am looking at a generic way of designing my pages which would work for both desktop/tablet browsers...present and future (and may be even mobile). I am using fluid design (or called responsive design) for the same (everything in %...width/height/padding/margin all in %)
Bear in mind that a device such as an iPad can be used in both portrait and landscape orientations, so I would use the following media query:
#media only screen and (min-device-width: 768px) and (max-device-width: 1280px) {
/* .touch class from Modernizr */
.touch .element {color: #fff;}
}
Or if you'd like to keep the styles in their own document:
<link rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width:1024px)" href="css/tablet.css">
Note: You could generally detect tablets by combining media queries with a feature detection library like Modernizr.
This is a bit of an odd one and was wondering if anyone had a solution.
We're building a few websites just now that are over 1000px in width and for some reason when the iPad loads them up in portrait mode it's scaling them down but leaving some width on the right so you have to scroll just a little over to see everything.
I added <meta name="viewport" content="initial-scale=0.7;" /> which does fix the problem but when loaded in landscape the user is presented with a small site to start with and can zoom out too far.
An example of this can be seen on one of my personal development sites. This isn't live yet so please ignore any bugs http://www.dundeewebstandards.com/events/
Thanks,
Chris
I had this same problem and tried all of the proposed solutions that I could find, to no avail. Finally, I figured it out... If the height of your page is less than 1024px and the width is greater than 768px, the native zoom functionality does not work as expected. This is also true if the width of your page is greater than it's height. Try using a media query to add a min-height to your page. Here is the code I used to fix this problem...
#page-container{
width: 1200px;
margin: 0 auto;
}
#media screen and (min-width: 768px) {
#page-container{
min-height: 1240px;
}
}