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)
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.
We have a website designed for mobile, and its appearance and operation are awful on desktop. I want to make a change to the CSS or javascript/jquery of the website so that it will be rendered good on the desktop. for example by something like this:
#media only screen and (max-width: 500px) {
body {
width: 500px;
background-image: * ;
}
}
One of the problems to be solved is that the vw's used to make the display responsive for different mobile sizes would be so big on the desktop that would mess everything.
please help thank in advance
Vw or viewport width is a percentage of the screen size. (So 10vw is 10% of the screen's width) Which means that vw always keeps the same size ratio regardless of what screen it is on. If you want to change a certain css element's size when screen width exceeds a certain size in px than add a new media query with a minimum width of a desktop screen. For example 1920px.
You can try search for ideas in bootstrap's classes and methodologies, like using different class modifiers for different screen sizes (col, col-md, col-xl, etc)
As Jalen said, you might want to look into inserting media query and breakpoints at sizes that you find less usable, and optimize those.
From experience, making an existing app reactive (meaning that it can run in both enviroments with a single codebase) can be daunting, but with few changes in css and templates you might be able to achieve it
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.
Im looking for a very simple method for responsive images.
The site im building has huge background images, which I need to keep for desktops.
However, these are too large to work on tablets/mobiles. It seems that if I reduce the images to 50% size, they will work on all screens.
Is there any simple way to have two sets of images in two different folders, and then select the folder based on the browser being used?
Cheers
Use media queries to denote 2 sets of images (and more). For example:
#myBg {
background-image: url('bigVersion.jpg');
}
#media (max-width: 600px) {
#myBg {
background-image: url('smallerVersion.jpg');
}
}
Simple example, showing two different images when the window width is above 600px and below. You can do a lot more with it.
Read more about media queries here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
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.