I have created 2 different versions of my website, one for laptop screen size and one for mobile screen size (tablet screen size, on the way). So, I was wondering if you could tell me how am I supposed to use javascript (because I have a feeling that it could be done through javascript) in order to have as a main webpage file the one that is supposed to be for laptops and in case the user opens my website through their mobile, the file that will open will be the one for mobile size screens. I hope you get my question.
Thank you very much in advance!
PS: I read something about #media but still trying to figure things out.
PS2: If you need me to post any code, let me know which part you might need and I will gladly post it.
You can use media queries to import different CSS files, depending on screen size.
This will work without javascript and would be the prefered approach in my opinion.
Your site could have the following code in a tag in the header:
/* Everything 1000px and lower */
#import url("./mobile.css") only screen and (max-width: 1000px);
This will load another stylesheet if the media query is satisfied.
You can read more about media queries here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Use media queries in your CSS file:
#media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
Examples and more, here
when it comes to responsive, avoid as much as you can javascript, you can do it with css media queries, you can learn more about it here:
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
or you can go for the framework approach, bootstrap for example.
I think if you use bootstrap, you can easily manage you requirement quickly.
Please refer following link to get idea -
https://getbootstrap.com/docs/3.3/css/
You can use media query to handle css on you web page
// For Ipad Portrait and Landscape
#media screen and (min-width: 768px) and (max-width: 1024px) {
}
// For iPhone and smaller devices
#media screen and (max-width: 767px) {
}
also to handle javascript you need to use device width in jquery
if ($(window).width() < 767) {
alert('Less than 767');
}
else {
alert('More than 767');
}
Related
pretty much i have made a website that looks great on desktop, but looks absolutely awful on mobile, so im going to write a version that is the same level of quality as the desktop version.
however i have no idea how to do this, i have looked it up and i have found one thing telling me to use the following code;
<script>
if ("ontouchstart" in document.documentElement)
{
// content for touch-screen (mobile) devices
}
else
{
// everything else (desktop)
}
</script>
i want to put html in where the comments are, but I dont know how too.
Any help?
You're going to want to write media queries in your css file. You might have to get creative with some of the styles that are currently on your site but this is generally how you would go about changing the look of a page for mobile devices.
#media (max-width: 767px) {
css styles that need to be altered for mobile go here!
}
You can also use min-width in the media query to apply stiles to large screens only.
#media (min-width: 767px) {
css styles that need to be altered for destop go here!
}
And also there are ranges.
#media (min-width: 360px) and (max-width: 767px) {
css styles for screens within this range go here!
}
You have to come up with a design for the mobile, not just trying to make it fit on the screen. You can achieve the responsiveness using CSS screen media queries. Media queries basically takes the browser current resolution (be it desktop or any devices) and it will automatically adjust the changes you made (like layout changes) based on what you assigned to the media queries. And you can also look up for CSS frameworks like bootstrap and tailwind, they have an amazing responsive/fluid component built in.
I got a WWW website project where mobile version is the same as mobile app but "desktop" version is completely different. Different nav, different cards, views divided in different way..
What is the best approach to do this in PHP/Laravel and HTML/CSS/JS? I'm asking about general approach.
Thank you in advance.
K
This should be done through css using media queries by doing this you can control the cards sizes and views depending on the device size. You can find more information https://www.w3schools.com/css/css_rwd_mediaqueries.asp
The 'trick' I use for that is using a different css stylesheet.
You can set a min and max for your css styles, f.e.:
#media (max-width: 600px) {
//put css here for very small screens
}
#media (min-width: 601px) and (max-width: 1024px) {
//put css here for medium sized screens
}
#media (min-width: 1025px) {
//put css here for large screens
}
Note that this only works if your html stays the same over all screens and the layout is only defined by different css. But in certain situations this is a possible approach.
But differences are huge and in my opinion using only CSS is not enought. Changing size of elements and position in grid is obvious and exist in all projects. This is some kind of edge case.
For example on desktop I have user profiles in one view with 2 sections but on mobile I have two dedicated subpages.
In desktop I have normal menu in nav bar but on mobile each view have on top and bottom contextual buttons.
In desktop some things are in modal but in mobile in separated subpage or as a appearing text label (simple status).
...and so on
I have downloaded a free HTML template from web and i'm trying to edit this HTML theme. In my theme i changed background photo, it's good on my computer and my resolution (1366x768) but on mobile and other resolutions it's not working well. Background image is crushing.
please visit that website with your computer and your mobile phone for understanding clearly. Theme link
and please help me to edit mobile version of this website. I couldn't find anything. Here's the list of my javascript files in theme folder. image of files
What you can use is a media query the syntax of which looks like so:
#media <What to respond to> {
//then place the elements, class and id here
}
The media query can take in width by doing #media (max-width:<insert width here>) or #media(min-width:<insert width here>)
Multiple media queries can be used together like so #media (max-width:100px) and (min-width:50px).
Another class of media queries can be used to specify how behave depending on the type of device, they include but not limited to:
tv
screen
handheld
all
They are used by typing #media <name of device>
An Example with some of they things i have mentioned being used
#media screen and (max-width: 100px) and (min-width: 50px) {
//If the device is a screen, is wider/equal to 50px but smaller
//than or equal to 100 then it will do this
img {
width: 75px;
height: 30px;} }
#media screen and (max-width: 400px) and (min-width: 101px) {
//I'm sure what will happen but i will tell you anyway
//If the device is a screen, is wider than/equal to 101px but
//smaller than/equal 400px
img { //Something
}}
My suggestion is to read up on it take a look here
There are many ways to solve your problem. One way is change the background using media queries. This is done by editing your css file. If you have multiple css files, you will need to know which one is setting your background image and place the media queries in there.
I would like to know, if I can maintain a single CSS file for my mobile web app. The web app is targeted for different resolution of android devices. So i would like to know can i use same set of images and scale it down using any CSS styles, rather than keeping multiple images for each resolutions ? The webapp is built using html5, css3 and javascript.
I know we can use css media queries, but through that i will need to load different images based on the device width. I am trying to use same images for all resolution of devices. If i keep a high resolution image overall in the code.
Is this possible ? please let me know.
Thanks in advance. Appreciate any kind of help.
You can do something like this:
#media screen and (max-width: 480px){
.element { background-image: url(../images/bg1.img); }
}
#media screen and (min-width: 800px){
.element { background-image: url(../images/bg2.img); }
}
but you can also set it to maybe 100% (If it should fit the screen on any size)
I have a website with some content. Based on the users screen resolution i want to show different content so that mobile devices will have some other content, but the rest of the site will be the same. I did some research, and it seems like the only possible way is with javascript. I code PHP most of the time, so i really suck at javascript, so it would be nice if someone could provide me with a simple script.
What i need is a javascript function like this:
if (screen resolution < X x X) {
show some content...
} else {
show some other content ...
}
If javascript is off, it should just show some other content.. :) I can install jquery if it helps. Thanks
It would be nice with examples for the html code too.
you should NOT detect if the user is on a mobile device with javascript. i recommend you this in PHP. you can use [$_SERVER'HTTP_USER_AGENT'] and then simply parse out the string to see what kind of user agent it is. I am actually implementing this same concept right now.
you can also use this class Mobile Detect
include("Mobile_Detect.php");
$detect = new Mobile_Detect();
if ($detect->isMobile()) {
// any mobile platform
}
Check out CSS at-rules. They allow you to specify maximum and mimimum widths for a "namespace" of CSS rules, inside which you can have different rules for smaller screens. But be careful when using those, since IE doesn't like to support good things.
#media screen, projection and (max-device-width: 800px) {}
#media screen and (max-device-width: 300px) {}
On a project I'm working on, we actually redirect to a mobile version of the page if the user-agent contains certain keywords(check out the HTTP headers from JS), and use a different stylesheet completely.
You can use css media queries to target different screen resolutions. eg:
#media only screen and (max-device-width: 1024px) and (orientation: landscape) {
/* iPad in landscape orientation css */
}
#media only screen and (max-device-width: 480px{
/* iPhone css */
}
More info:
https://mislav.net/2010/04/targeted-css/
https://webdesignerwall.com/tutorials/css3-media-queries
you should try CSS media queries instead
In don't know from PHP but in .Net you can kinda detect that they are a mobile visitor and then you can redirect them to a mobile section of the site.
Then all you really need to do is write the small site re-using your existing web controls etc. Again, unsure if you have that concept in PHP but I imagine you would.