I have an Android mobile app created with jQuery Mobile and PhoneGap. I would like to have 3 separate layouts depending on device and orientation:
Portrait phone - on smartphones I want to use always portrait layout
Portrait tablet - different than on phone
Landscape tablet
Is this possible to achieve with CSS media queries? I know changing layouts is possible, but not sure how to force portrait layout only for smartphones and at the same time allow landscape for tablets.
Most of the devices would come under the following 3 resolutions
1) HVGA-Half of VGA (320 x 240) 2) WVGA- wide VGA(800x 480) - nearly 1.5 times of HVGA 3) HVGA 2x- (640 X 960) - IPHONE 4 uses this resolution
for your requirements
1) & 2) you can write your styles inside #media as below. you can use HVGA or WVGA. Change width and height as per your need
#Media screen and (min-width: 320px) and (max-width: 480px){
/* css files here*/
}
3)For a landscape view use orientation:landscape like in below example
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape){
/* css files here */
}
The code piece is just for your reference . Your needs may be different, Please change parameters like screen/only ,min-device-pixel-ratio, max-device-pixel-ratio etc as per your needs
Related
I have a minimal app with basic views, texts, images and buttons in react native. The problem I am facing, is in managing layout for multiple devices.
Any suggestions on how can I maintain a same (proportionate) view & font size for multiple devices (multiple screen resolutions and screen sizes).
View:
For example, if I want a list view of items, where each row has one image on the left, some text in between and 2 buttons on the right (one below the other i.e. flex-direction: 'column'), how can I have this look good on a 5" device as well as a 10" device?
Also, consider the buttons have some borderRadius, if we are scaling the buttons, the borderRadius value will also need to be increased. How do I achieve this?
Fonts:
I have tried using PixelRatio.getFontScale() but this scales the font depending on only the resolution (from what I understood). Using this, makes a font of size 12 look bigger on a 5" device with higher resolution and smaller on a 10" device with lower resolution. So how can I manage font sizes for the react native app?
In addition to the PixelRatio.getFontScale() you can also use the Dimensions API to get the height and width of the window, and scale your components relative to that. I have built an app that runs on both iOS and android and use this to scale width's + heights.
Checkout the link Dimensions # Facebook - React Native
ie.
Dimensions.get('window').width;
Dimensions.get('window').height;
Will return you the size of the window
How about this library? react-native-scaled-layout
You can use scaled dimensions for your layout margin, height, padding ...
(36).scaled() /* or */ (36).d()
(36).widthScaled() /* or */ (36).w()
(36).heightScaled() /* or */ (36).h()
(24).fontScaled() /* or */ (24).f()
style={{
width: (100).w(),
height: (210).h() + safeAreaBottom,
borderRadius: (16).d(),
justifyContent: 'center',
paddingBottom: safeAreaBottom + (24).h(),
}}
I'm using Bootstrap MVC and have a 3 column layout for the index page for a internal blog. Small left hand column which shows pics, blogs in the middle and useful widget in the small right column.
When you view the site on a mobile device it all moves as it should but I would like the left column to move after the main blog column only for a mobile device. Is this possible I found the push and pull commands but it dosnt do it for just mobiles?
Cheers
What I would do is either use the default media queries in your own css files. These are the ones that bootstrap uses:
/* 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) { ... }
or depending on your layout you may want different break points. You would just either use id's for those columns or add classes to get the behavior that you want.
Hope it helps!
I am trying to setup a layout such that it has an image with regions. Those regions,can have either other ImageView or TextView. I am able to achieve this at a high level using FrameLayout and RelativeLayout. However, it does not scale properly on different devices.
As an example here is an image
Yellow/Red Region - ImageView setup dynamically
Blue/Green Region - TextView
So On the Device, I want it to look like this:
And like this:
Note that Image scales correctly and so does child views in correct regions.
Can someone please share some ideas on how this could be achieved?
I was able to do this by writing a Custom View. I set the layout bonds based on the % offset.
For example the image would start at 15% off top and 10% off left and width is 30% card size etc.
I tested this with multiple devices and so far it is working as designed.
Have a look at Supporting Different Screen Sizes
Also have a look at Supporting Multiple Screens
This links has exactly what you are looking for. Follow the example and you will achieve the desired result.
These tutorials explains how to scale images based on the screen sizes and how to design your layout.
Extract from Google's dev site:-
Explicitly declare in the manifest which screen sizes your application supports
Provide different layouts for different screen sizes
Provide different bitmap drawables for different screen densities
Use OnConfigurationChanged() to determine the orientation and changes the views according to your requirements
public override void OnConfigurationChanged(Android.Content.Res.Configuration newConfig)
{
if(newConfig.orientation==Configuration.ORIENTATION_LANDSCAPE){
//Change the Layout width and height attributes according to your requirements
Log.e("On Config Change","LANDSCAPE");
}else{
//Change the Layout width and height attributes according to your requirements
Log.e("On Config Change","PORTRAIT");
}
base.OnConfigurationChanged(newConfig);
}
I already have setInterval for the images changing on my website. My problem is that it is only the first image that is replaced with the retina image. How can I load my retina.js again when the other images is loaded? They are changing every 5 sec
I use the script from retinajs.com.
By using CSS media queries you can serve these high–resolution images automatically to retina devices.
/*CSS for basic styling and non-retina image path:*/
.icon{
width: 100px;
height: 100px;
background-image: url(icon.png);
}
/*CSS for serving the retina image to devices with a high "device-pixel-ratio":*/
#media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.icon{
background-image: url(icon#2x.png);
background-size: 100px 100px;
}
}
UPDATED:
- Cons(retina.js): If you are using retina.js you are serving
normal-sized and #2x images to retina devices, which dramatically
increases the loading time of your site. I cannot recommend using
retina.js if you care about a fast loading time.
- CSS media query (Pros): By adding a CSS media query that detects
high-definition displays you can change the image path of the
original background-image to the #2x image for those displays.
Update:
You might need to modify retina.js to work in slideshows.(See here https://github.com/imulus/retinajs/pull/26)
Modifying these lines
that.el.setAttribute('width', that.el.offsetWidth);
that.el.setAttribute('height', that.el.offsetHeight);
to this..
if(that.el.hasAttribute('width')){
that.el.setAttribute('width', that.el.offsetWidth);}
if(that.el.hasAttribute('height')){
that.el.setAttribute('height', that.el.offsetHeight);}
I have applied body-background color(ex:blue) to my page. But when i open this page in tablets, mobile devices the color should change to orange color. when i resize my pc browser window the colors wont be change. Is it possible?
You can change the width by changing the CSS tag; but that changes across all devices.
#media only screen and (max-device-width: 1440px) {
To determine if its a tablet or what device the user is using specifically you can use Javascript to determine the device. Then load CSS accordingly.
You can look at the code here; [link]http://davidwalsh.name/detect-ipad[/link]
The problem with that is there is thousands of devices out there. So you'll have to check for each device.
// For use within normal web clients
var isiPad = navigator.userAgent.match(/iPad/i) != null;
// For use within iPad developer UIWebView
// Thanks to Andrew Hedges!
var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /iPhone OS 3_2_2/i.test(ua);
Have you attempted a CSS3 Media Query; as posted below?
/*Common Tablet Width*/
#media only screen and (max-device-width: 1024px) {
body{
background-color:blue;
}
}