so i made a website that has images multiple textboxes and etc, some user percentage and some use pixels by that i mean they use that to be in the specific place there in right now. So if you connect your laptop to a tv and put the website it will automatically scale up perfectly it just causes the things to be a little blurry but everything is in place. i was wondering how i can add like a function for my website that selects everything in the page and just shrinks it or expands it depending on the screen size, i dont care if it gets blurry after shrinking or expanding. Or if anyone has any other idea on how i can make everything fit to page no matter screen size it would be very helpful.
First of all, there are multiple ways to make a site responsiv, the easiest way are the media queries:
@media only screen and (max-width: 600px) {
body {
background: #fff;
}
}
@media only screen and (min-width: 601px) {
body {
background: #ccc;
}
}
This can also be applied to different stylesheets:
<link rel="stylesheet" type="text/css" href="/styles/gardener_main.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/styles/additional.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/styles/gardener_800.css" media="screen and (min-width: 800px)"/>
<link rel="stylesheet" type="text/css" href="/styles/gardener_799.css" media="screen and (max-width: 799px)"/>
They are basicly telling the devices what styles to use for what display size.
For the start you can work through this: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
to get a better understanding of the media query itself.
But! Most somehow tend to forget that you also need to adjust your html:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Depending on how much devices and how much older devices you want to support you can also add a switch that basicly replaces everything:
<?php
$mobrowser = '0';
if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android)/i',
strtolower($_SERVER['HTTP_USER_AGENT']))) {
$mobrowser++;
}if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or
((isset($_SERVER['HTTP_X_WAP_PROFILE'])
or isset($_SERVER['HTTP_PROFILE'])))) {$mobile_browser++;}
$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));
$mobile_agents = array(
'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
'wapr','webc','winw','winw','xda ','xda-');
if (in_array($mobile_ua,$mobile_agents)) {$mobrowser++;}
if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini') > 0) {$mobrowser++;}
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows') > 0) {$mobrowser = 0;}
if ($mobrowser > 0) {
echo '
HTML old mobile devices etc
';
}
else {
echo '
HTML desktop
';
}?>
With this enormus something you can grab the mobile agents, but such things are only interesting if you really want to support historic devices.
Maybe you could try to add some css like @media screen and (min-width: 1240px) {...}
Here is how you can test it. Just open it in browser, go right click inspect element or f12. I marked with red where you can see that, how it will look on different sizes.
