The height of the screen on mobile is not 100%. It looks good on bigger devices though.
This is how the page looks DESKTOP IMG
I tried to include <meta name="viewport" content="width=device-width, height=device-height" /> but it only makes the content bigger and it wont solve the problem.
This is how it looks after i used that. PHONE IMG
The footer moves down the more i add stuff in the content. I also tried to give height 100% to the body but that wont fix it also. Is it possible to make the page fit the size of the device so it looks same in every device.
Setting the height on the body is not a good idea. You better work with a sticky footer if that is what you want. (For example: http://ryanfait.com/sticky-footer/)
Try making your webpage responsive by using frameworks like Bootstrap. (Example: https://getbootstrap.com/)
If you really insist to set the height on the body, please add your html to make sure we can show you what you are doing wrong.
Related
I'm building a React app that can be injected in a page as a normal html element. I ran into the issue of webpages that don't use the viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1">. I am required to make my injected element scale properly on mobile devices, even though the page it is injected into doesn't.
I've tried adding classes that represent the current viewport width and using them similarly to media queries, however I can not deal with the font sizes not scaling properly, since using rems would use the page font size which itself doesn't scale.
I even resorted to using transform: scale((window.innerWidth / window.screen.width).toFixed(3)) but that is hardly controllable.
Any ideas on how can I achieve this?
So, there is an app that links to two different webpages.
The first one is made by me, it is responsive so when it is loaded on a phone everything fits nicely.
The other one is made by the company i work for and is not responsive.
Now I am supposed to add a bar at the top of both pages and when they are loaded in the app the bar needs to have the same size for both pages. I can not change anything on the non-responsive page, only the bar at the top.
Lets take 900px and 360px as an example, one page scales down to fit on 360px for the iphone and the other stays on 900px width so it is scaled down to fit on a mobile screen by the phone.
http://imgur.com/6tV1IDT
I need to make a bar for the 900px width one that always have the same height as the one on the 360px width page even if it is scaled down by different phones. (scaling down to differnt widths/heights)
Is there any way to set the height of an element to be ignored by phone scaling even if the rest of the page is scaled?
I think if you just define width: 100%; for that bar it should work, also on the non-responsive page.
Try adding this to the head of your document <meta name="viewport" content="width=device-width, initial-scale=1">. As your question is horribly written it's hard to even understand what you want or trying to fix.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The rest of the head below... -->
</head>
I know this was not worded so it was easy to understand but maybe someone will search something similar and end up here anyway so here is the way i solved it.
//get the width of the browser without the scaling
//if the window is smaller than 260 my paged stopped scaling and started to use a horizontal scrollbar instead
//the minimum depends on your webpage I think. (Change the 260 to the minimum width of your page.
currentWidth = screen.width > 260 ? screen.width : 260;
//get the relative size depending on the size of the non-scaling webpage.
//The page I worked with had a width of 1050.
//If the browser is wider than the page set the size to 1.
relativeSize = screen.width < 1050 ? (1050/currentWidth) : 1;
After you got that value you can use relativeSize * (the size you have when it is not scaled) and it will end up being the same size even if the page is sized down.
I set it to the onLoad and onResize events and resized my header whenever the page size got changed. i.e. when someone flips a phone over you might want to resize again.
EDIT: screen.width instead of window.outerWidth to get it working on iphone.
I haven't tested it on an android device yet because I don't have one, but when I visit my site on my iphone it looks like the image below. I can't figure out why it loads like that. The site is completely responsive, and I have this in the header:
<meta name="viewport" content="width=device-width, initial-scale=1">
Inside the <header> element of your site, in this div:
<div class="header-ads f-right">
There is a 728x90 google ad, which although it is not visible on your page, is still there and is widening your page and making the rest of your content scale down.
Removing that google ad fixes the issue.
Usually this is because there is some element on the page which is wider than your main content column. Later iPhones tend to zoom out to accomodate this additional content.
Check all the element widths and ensure that none are hard coded values. Use width:100% for full width responsive content.
I am using bootstrap 3.0 for my website and i use #media queries in CSS to create a responsive design. I would like to add a button that allows someone on a phone to view the site as they would see it on a larger desktop screen.
Is there a way i can force CSS to think that the max-width/min-width is a certain size? I don't want to actually show scrollbars, just change what rules are applied to match what would be shown for larger screen sizes.
You could manipulate the meta viewport tag to use a specific pixel dimension, an example with jQuery would look like:
$('meta[name="viewport"]').attr("content", "width=1280")
If you wanted the screen to render 1280 pixels into the viewable area.
You will follow these steps
1)add this meta tag to your html page inside of head tag
<meta name="viewport"
content="width=device-width; initial-scale=0.95;" />
2)in css file for every .class you can do this one
#media(max-width:1280px){
.abc{ width:100%;}
}
try to these steps. You can solve your problem
I'm trying to produce a mobile version of my website, but have encountered one problem:
The the whole website fits properly on the computer (with an example browser width of 480px) but leaves space on the right when viewing on my mobile phone (regardless of the browser I used). So the whole site looks good, but you can scroll "out of the website".
I first tried to disable horizontally scrolling, so I included this line:
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
To disable the (still scrollable!) space on the right I added this to my "mobile.css":
It worked on the computer, but not on my mobile.
body{
width: 100%;
overflow-x: hidden;
}
My website is avaiable here: my mobile website
My mobile.css file is located here: my "mobile.css"
I have tested the website on following mobile browsers:
Google Chrome
Dolphin
The default android browser
I originally wanted to avoid Javascript, but if there is a javascript solution, please don't hesitate to post it!
If you want your layout to be mobile friendly, it's best to be thinking about this right from the beginning. So, for example, if you are going to set fixed widths on elements (which I don't recommend), such as—
#back-menu-left {with: 500px;}
you need to ask yourself what will happen to this on a small screen. So, either don't set that width, or immediately write an #media rule to override it on smaller screens.
(I didn't check through the rest of your code, just stopping when I found one oversized element. Best to check and see if there are any other overwide elements like that.)