I am creating a hybrid app with Ionic 4.
I use css media queries to do specific layouts according to the screen size mobile is needed. Example:
This how it looks my app in a viewport of 360x640 screen size pixels in browser:
But, this how it looks in my cellphone which have the same screen size (360x640) in pixels:
All the blue part is cut off of the screen.
here is the css:
#media screen and (max-height: 640px) {
.ultraipunt{
font-size:19px;
}
.tittle{
font-size: 23px;
}
.tittle3{
font-size: 19px;
}
.buttonclass{
font-size:19px;
height:60px;
}
.buttonfacebook{
font-size:19px;
height:60px;
}
.buttongoogle{
font-size:19px;
height:60px;
}
.fond1{
min-height: 154px;
}
.fond2{
padding-top:0.5em;
padding-bottom:0.5em;
margin-top:0px;
}
.textwhite {
font-size:18px;
}
.textwhitebold {
font-size:18px;
}
form{
margin-bottom:0em;
margin-top:0em;
}
.imgen1{
width:65px;
}
}
Using the site: https://www.mydevice.io/, this are my cellphone specifications:
Now my questions are:
Why the css sizes are no translating well to my cellphone viewport?
How can I do responsive design with ionic 4 for hybrid app?
In your mydevice.io capture can see screen.width and screen.height. You must not use that properties to calculate your available viewport resolution because it will always return the whole screen resolution (which is indeed 360px x 640px) not your viewport resolution (which will be less height usually and sometimes less width, for mobiles, depending on the display mode, and if the status bar is displayed and if the buttons bar is displayed).
Instead of screen.width and screen.height use one of the several alternatives that will give you the real available viewport for your app: for example window.innerWidth and window.innerHeight.
You are going probably to get less than 640px in window.innerHeight.
About the media queries from css, it will use the viewport resolution, but you specified max-height:640px, and because your viewport height is less than 640px the rule matches, even if the height is less, even if you want other thing.
So, as long as your real height is less than 640px you must add other/more css rules with even less height, or maybe use another approach (bottom anchoring or for more complicated scenarios JS for aid dynamic responsiveness based on innerHeight/innerTop properties).
PS A bit off topic but very important: always, if you are using css-responsive on your own, try to double check if there is a meta viewport with at least width=device-width, otherwise mobile html renderer will probably do weird things.
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
PS2 I assume that you want to use your own stylesheets, otherwise probably there are tons of already made material for ionic.
you have to use the ionic responsive grid for responsive design in Ionic : https://ionicframework.com/docs/layout/grid
By default, the grid will take up 100% width. To set a specific width based on the screen size, add the fixed attribute. The width of the grid for each breakpoint is defined in the --ion-grid-width-{breakpoint}
Related
I want to make a media query to target just my phone. What breakpoint(s) would I use?
For instance, my body max-width is 800px wide with 2px margins. When the window is less than 800px (mobile?) i want the margins on it to be 0px (this works on my browser). Turns out that my phones screen is hi-res and therefore the width of the display never goes below 800px!
Is this because of pixel ratios?
What do I do?
The meta-view-port tag changes how websites are displayed on your phone, or other small screens that may want to 'adjust' a website for you.
Some screens, for instance - an iphone 5 - with no meta-view-port tag, will size the website to fit your screen / but like a little version of your website zoomed out. https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
A combination of a view-port tag, and a media-query in your styles would allow you to change your style rules depending on the screen-size. It's kinda best just to make the breaks where things get ugly and not based on the screen sizes of "Today" that will change next month.
I would suggest building from the smallest screen first and moving up as you go with styles like this:
html {
height: 100%;
background: blue;
}
#media (min-width: 400px) {
html {
background: red;
}
}
#media (min-width: 850px) {
html {
background: green;
}
}
etc.
https://jsfiddle.net/5qhmrym5/
If you already have your site built.. and you really want to target the smaller screens, you can use max-width instead of min-width - but I've found that it takes more time and energy to override styles on the way down - then it does on the way up because styles get more complex for larger screens.
#media (max-width: 850px) {
/* styles */
}
If what you want to change is margin value when viewed on mobile you should design your display for use on any screen above the mobile size, 800px wide for you, then create a media query, similar to the ones in the link commented by #Hynes, which changes just margins to 0px.
You are correct in assuming your device is 800px wide due to ratios, but it also has to do with resolution, which are similar topics here. If you imagine a sports jumbo screen, a pixel is nearly an led in size, vs a 1080px display laptop, where the pixels are nearly unobservable. Ratios and resolutions are the reasons displays are tricky to make, and why values such as em's and percentages have come to be, to bypass the differences in display. This is also a large reason of why media queries are so useful
html {
box-sizing: border-box;}
*,*:before,*:after {box-sizing: inherit;}
Try using box-sizing: border-box on your css and also percentages, this is the way I like it, but surely you will find plenty of information about it, just google it.
Found the solution: https://stackoverflow.com/a/18500871/5906166
You need to include this in your header:
<meta name="viewport" content="width=device-width, initial-scale=1">
Explanation:
Fortunately, you can specify a viewport meta tag in the <head> section
of your document in order to control the width and scaling of the
browser's viewport. If this tag has a content value of
width=device-width, the screen's width will match the device
independent pixels and will ensure that all the different devices
should scale and behave consistently.
So using the following code with template I can set when responsive mode kicks in.
#media all and (max-width: 680px)
However is there a query that if the browser width goes below for ex. 380px responsive, items stop minimizing etc. and stay at what would appear at 380px responsive only. So if someone was minimizing browser or had viewport of 280 they would be viewing what it looks like at 380px responsive but with scroll bars?
Any help would be appreciated.
Thanks.
You could simply set a min-width on the body element.
Example Here
body {
min-width:380px;
}
Bootstrap doesn't offer that level of control but you can simple add the following media query and then impose styles on elements on screen sizes smaller than 380px wide.
#media all and (max-width: 379px) {
// Style elements specifically for screen sizes less than 380px
}
After migrating a website to responsive html5 using media queries, I find that I still can't get the mobile iOS 7 safari browser to display the footer/main/header sections at the same width, despite their css being set to display:block and width:100%.
Examples:
http://i.imgur.com/QUxffNT.jpg
http://dev.shermanbrothers.com (username: devreview password: De3e3vfr4 ) [html5 update to site]
And a similar problem occurs even on an older version of the site:
http://i.imgur.com/1sS4WRZ.jpg
http://shermanbrothers.com [OLD version of the site with table-based layout, still has similar issues]
Now, I have some guesses as to -why- this is happening on mobile and not on the narrow windows of a desktop browser:
Some block level elements like the main/between-header-and-footer one have too much content to even shrink down to that 100%
Or perhaps using display:table on the middle section is allowing it to blow up larger than the other block & 100% width elements.
But I don't know what techniques to use to combat the problem.
- I can't even inspect the code via mobile to determine the reasons for the differences.
- setting a css max-width to images (eg max-width:100% ) within their container is not better.
So how can mobile-specific bugs, and mobile width/layout issues especially, be debugged & dealt with?
The tables are a huge headache for diagnosing this problem since there is so much markup to look through. However, the tables are not the reason why your layout is breaking (at least not with the markup I saw when I came across this question). Your problem is that you have so many fixed widths on images, text and table columns.
To fix this, you will have to set-up breakpoints in your media queries. Something like this for the images:
#media (min-width: Whatever is the smallest screen size the image will not break your layout) and (max-width: 1 pixel below the previous size where the image was so wide it broke your layout) {
.header-image {
width: whatever is the widest width that keeps it from breaking your layout; // This will change with smaller queries
height: auto;
}
}
And something like this for your fonts:
#media (min-width: Whatever is the smallest size the font will not break your layout) and (max-width: 1 pixel below the previous size where the font was so wide it broke your layout) {
.navbar-font {
font-size: whatever is the biggest font size that keeps the font from breaking your layout;
}
}
Alternatively for your fonts, you could tell them to wrap as the screen gets smaller, but then you would have to factor in their height as they wrapped:
.navbar-font {
white-space: pre-wrap;
}
Do something similar with the above to allow the width of your table columns to resize properly as well.
Also, follow #TylerEich 's suggestion and configure your viewports.
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
http://developer.android.com/guide/webapps/best-practices.html
Finally, check out BrowserStack for mobile browser testing.
This may not fix all of your layout issues, but it fixed the biggest ones I found. Table-based layouts are a pain to work with. Good luck :)
font-size
the top element of the footer columns (footer-flex) has a font-size: 10px. And the child element (.footer-block) has a font-size: 2em. This means the .footer-block elements have font-size: 20px. (10px(top element font-size) * 2em) = 20px. This causes big texts in your footer.
display
You're using float to align elements side by side which is a very bad practice. If you'd like to align elements properly you should select display: table-cell or display: inline-block. The difference is table-cell is just like <td> tag. Which means all the consecutive elements has the same height.
Because table-cell acts just like td tag the table-cell cannot have margins. If you'd like to have margins for your table-cell you need to provide a top element which is display: table with a style border-spacing. An example which is very proper for your case: http://jsfiddle.net/R3zDu/
As you can see there is no clear: both or float: blah definitions and clear css definition.
This doesn't mean "don't use float anymore". float's main purpose is to align the images in the texts/paragraphs.
clear all the float and clear: both styles.
apply table-cell method.
testing
I don't think there is a software that renders the page just like a mobile phone. On the other hand, if you have problems in iOS you can take a look at Safari browser in your PC or Mac which acts like iOS Safari in most cases (at least in your case).
Sounds like you need a mobile-friendly <meta> tag. Example:
<meta name="viewport" content="width=device-width, user-scalable=no">
Quote from the Mozilla Developer Network:
A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, user-scalable=no">
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)
The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
There is a lot of code that needs to be redone.
Instead of being this painful, I highly recommend you to look into a framework like bootstrap or foundation. They both provide good template example to help you get started. Their media queries also work like a charm and they will help you cut lots of development time and some headache.
#head{
float:left;
width:100%;
}
#content_head{
display:table;
margin:0 auto;
}
#body{
float:left;
width:100%;
}
#content_body{
display:table;
margin:0 auto;
}
#footer{
float:left;
width:100%;
}
#content_footer{
display:table;
margin:0 auto;
}
If I was you, and don't want to do a complete overhaul, I would suggest you set:
<meta name="viewport" content="width=500px" />
And try fixing the things that float out of your 500px width (like the navigation).
This way, you don't have to do much work. The site is more or less a bit normal visible on a mobile. I studied your code a little, but it's a lot of working if you want to do it proper.
500px is somewhat ok for a mobile device, but you can tweak it to what you like, it isn't as nice as device-width but gives you a fair compromis between your pile of work to do and the general user experience. As long as you allow zooming (user scaling).
One other trick I suggest is to make the font a tiny bit bigger on mobile on some parts, like your brand nav. And form elements always minimal 16px so you don't get zooming on an iPhone when you focus a field.
#media all and (max-width: 767px) {
.brand-name-td{
font-size:1em;
}
input[type="text"],select,textarea{
font-size:16px;
}
}
Further, what's handy and improves the UX, there are some parts you just want to hide on a phone, use this:
#media all and (max-width: 767px) {
.hide-mobile{
display:none;
}
}
And just when you have some element you want to hide, add the class (divide by a space if you have more classes)
<td class="right-side-nav-container hide-mobile">...</td>
Regards
use diplay block and width to 100%, remove also float and max-width, min-width property.
Also you can simulate a mobile just by using a browser since you already have the viewport metadata. Just resize the width of the browser.
I picked up this handy little fix while browsing some random sites in firebug, it looks like what you're describing, why not give it a go and see if it works :P
$(function(){
// IPad/IPhone
var viewportmeta = document.querySelector && document.querySelector('meta[name="viewport"]'),
ua = navigator.userAgent,
gestureStart = function () {
viewportmeta.content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
},
scaleFix = function () {
if (viewportmeta && /iPhone|iPad/.test(ua) && !/Opera Mini/.test(ua)) {
viewportmeta.content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
document.addEventListener("gesturestart", gestureStart, false);
}
};
scaleFix();
});
I am maaking a responsive app for all devices(sizes), I used the formula, target / context = result. For width i given 93.75% (900/960), when i used the same formula for height - 62.5% its not visible, If i used 600px for height that maincontent div is visible, how to fix this ?
Below is my code i tried,
<div class="maincontent"></div>
.maincontent{
width:93.75%;/*900/960*/
margin:5% 3.125%; /*30/960*/
height:62.5%;/*600*/
background:#2c3e50;
}
I think you're putting a lot more work into this than you need to, here's how I would set up your calculator:
http://jsfiddle.net/TTQ4e/1/
Working with percentages can get messy real quick - notice how the only percent I use is 100%.
You can make a div visible after a certain height by doing something like this
.myDiv {
display:none;
}
#media (max-height:600px) {
.myDiv {
display:block;
}
}
edit
Also, the only handheld resolutions you should really worry about are these:
320x480
480x320
360x640
640x360
768x1024
1024x768
800x1280
1280x800
I'm guessing that because you can do this with Media Queries:
#media (min-width:500px) { … }
That at some point or another, the CSS stylesheet must know what width the screen is, sans Javascript.
Is this the case?
You can use device-width which will test of the screen's width in px. That however is not entirely recommended. Use max-width and min-width (for the viewport) instead.
If you are trying to GET the screen width and use it (something like content: (device-width); of some sort, that's not possible. Stick with JavaScript.
Manual Reference
As the client browser's viewport changes size, the browser will repaint the visible area. At that point in time the browser will be checking if there are media query styles that are relevant for the new viewport.
The CSS doesn't really know what width the browser's viewport is, so much as the browser knows what CSS is applicable for a specific viewport.
Well...
#media(width:1024px){
p#id:after{
content:"1024px";
}
}
If the width of the viewport is 1024 pixels, this displays the text "1024px" after the designated <p> element. You could (hypothetically) put several thousands of such blocks of CSS to display the width of the viewport, for any reasonable value of its width. (Note that the text isn't selectable in some browsers.)
The more you know... (please don't actually do this)
In html ->
<meta name="viewport" content="width=device-width">
OR
In CSS ->
#viewport {
width: device-width;
}
Hope it helped.