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
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?
I'm guessing the answer is no but is there a reliable way to make a webpage responsive without adding a viewport meta tag to the head?
I have added a login form container that's 400px wide and centered vertically and horizontally. It looks fine on desktops but it is zoomed way out and looks tiny when you access the page on a mobile phone. Users have to swipe multiple times to zoom in so they can use the login form.
I don't have access to the head. I can only create a container within the body. However, I can add CSS for anything and basic JavaScript. I have limited access because the webpage is generated by a server program. It only allows adding a CSS file and header & footer HTML files. Basically, it limits me to wrapping the form and error container with a custom container.
You can build a responsive websites using CSS's #media rule.
Media queries allow you to apply specific css style's depending on device type an characteristics. Consider the following code, for example:
body {
background-color: yellow;
}
#media only screen and (max-width: 600px) {
body {
background-color: blue;
}
}
This code will result in your page's background color being blue until the screen width is <= 600px.
Read this MDN article for a more detailed explanation on media queries.
You can use JavaScript to program your own responsive behaviors. A simple example would be to scale the html container by the devices pixel density.
"window.devicePixelRatio" gives you the actually number pixels per css pixel. Then scale your container by it:
const pixelDensity = window.devicePixelRatio;
document.getElementById("container").style.transform = "scale("+pixelDensity+")";
Css media queries may not work properly, but again you can use javascript to dynamically load styles based on the adjusted screen size when multiplying by the pixelDensity above.
From a quick glance (at Can I change the viewport meta tag in mobile safari on the fly? for example) it seems you can really create and inject relevant meta tag with JavaScript, like:
<script>
(function(){
var m = document.createElement('meta');
m.setAttribute('name','viewport');
m.setAttribute('content','width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0');
document.head.appendChild(m);
})()
</script>
Test page: you should see wide overflowing dark paragraph before tapping the button which executes above function. After that the paragraph should fit into the viewport.
You can do it with JavaScript, but it can be apply only after the page was loaded, so it's not usefull in your case...
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.
I have a website which I want to follow the resizing of the browser window so that it always fits.
I tried using css transform scale property with a ratio given by current window width divided by full-screen window width.
It does re-scale but there must be something wrong with it because it leaves white blocks to the left and the right of the content (so it shrinks the site too much and then centers in in the window)
Here is the javascript code:
$(window).resize(function(){
var ratio = $(window).width()/1340;
$('body').css('transform','scale('+(ratio)+')');
$('body').css('-ms-transform','scale('+(ratio)+')');
$('body').css('-moz-transform','scale('+(ratio)+')');
$('body').css('-webkit-transform','scale('+(ratio)+')');
});
Is there a better way to make the page fit the window (or make the scaling scale properly)?
To make your website mobile friendly, you should really think about making it responsive using media queries or using some front-end framework like Bootstrap, Foundation etc.
Or if you just want to scale your website so it should not horizontally scale and fit to user's screen (No matter how small your UI component become) You can do that by adding following meta tag in your head section.
<meta name="viewport" content="width=device-width, initial-scale=1">
It'll force browser to keep the website scale enough to fit the mobile screen width.
Hope It'll help.
What you're wanting to do is build the website using Responsive and Adaptive methods. See if this link helps! http://www.imediaconnection.com/content/33435.asp#singleview
you can use this, put the whole content inside it
#wrapper{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow:hidden;
}
Use
<meta name="viewport" content="width=device-width,initial-scale=1.0">
in Html head section and
#media only screen and
(min-device-width : screen px) and
(max-device-width : screen px) {
#id{style}
}
in CSS.
I have two style sheets:
<link rel="stylesheet" type="text/css" href="/core.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/core-desktop.css" media="only screen and (min-width: 800px)" id="css-desktop" />
The second one should only be loaded when the window is 800px or wider (narrower displays get a layout more appropriate for mobile devices).
The JavaScript needs to know if that second style sheet is being applied, I have tried the jQuery:
($(window).width() > 800)
But when you get around the 790 - 810px width, Chrome/Firefox (and probably others) will return a value such as 791, and the 800px+ style sheet will still be loaded.
I suspect it's due to the scroll bar (but targeting the $(document) or $('html') either doesn't work, or are the same).
So is there a way to test if $('#css-desktop') is enabled/active/used?
You can do the following.
Make a div which has a display: none; in the first stylesheet, so it is not shown.
In the second stylesheet you will add a position: absolute
In your Javascript you check if( $("#thediv").css("position") == "absolute")
The position: absolute; is only applied in the second stylesheet.
You could try
window.matchMedia(document.getElementById('css-desktop').getAttribute('media')).matches;
https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
Here is an example as to how you can try to detect the "real" width of the browser window: detect window width and compensate for scrollbars - Javascript
There is a problem with what you are attempting.
If a user is browsing the page while resizing the window below 800px in width then, he will get the mobile version of the page and later when he/she maximizes, he will still get the mobile version.
So, relying on screen width are not a reliable method as the screen resolution of the mobiles are growing significantly nowadays.
Your best shot is to read the User Agent information of the browser, which will easily reveal whether it is a mobile browser or other and load the css files according to it. Then for the variable screen resolution, you can use your current techniques to load width specific codes.