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.
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 want to have 2 different outputs for mobile and desktop
how I must handle it with javascript?
for example
first i check the device width
if width <= 700 px is mobile = true
and show mobile output(html,js,css)
else mobile = false is mean device is a desktop
and show desktop output (other html,js,css)
how I can do this?
you shouldn't use javascript for this work. You should use css media queries. Take a look at this
If you must handle it through JavaScript, you can use the window.screen.width and window.screen.height properties to check the devices height and width. But as a Comment already suggested, you might want to look into media-queries in CSS they are pretty powerful.
Possible usage
if(window.screen.width <= 700) {
// do mobile logic
} else {
// do desktop logic
}
You can use media query to handle what will do by its screen size.
Here is to handle it with JS,
Reference:
https://www.w3schools.com/howto/howto_js_media_queries.asp
https://css-tricks.com/working-with-javascript-media-queries/
And here is when you want to handle with CSS, you can follow this link
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Search around on google for "responsive design". It is a better way to do what you want.
A good starting point:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
Also, magically showing different content for different clients might hurt your search engine rankings, and will make testing your website more difficult.
Try using media queries,
For mobile:
#media only screen and (max-width: 600px)
{
}
For Laptop/Desktop:
#media only screen and (min-width: 992px)
{
}
user agent is work in react js and in js window.screen.width
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 am back here again with another question for responsive grid systems. I have this website http://www.waldenservices.com that uses The Responsive Grid system with various columns, I have CSS codes for 1024, 768 and 480. I am definitely inserting the css scripts on the page but I am not sure of the jQuery/java code I need to make it work.
My questions are: What script do i need to call these css styles?
And, Does these help me to detect the screen size of the user? (I think web browser size is one is my biggest concern, as different users cannot see the whole page but have to scroll from side to side to even see the whole menu).
Any help or input is very appreciated, I really don't want to have to redesign this whole page.
Thank you guys!
You don't even need to call script (I don't know what you meant by it), you just need responsive stylsheet.
All you need:
#media screen and (min-width: 1024px) {
.col-5 {
width: 50%;
}
}
#media is CSS # rule, used for media queries.
screen means these styles are just for screens, not for printers, or for presentations.
(min-width: value) and (max-width: value) are used to specify minumum or maximum screen size on which these styles will apply. You can combine (min-width) and (max-width).
Whenever, if you have problems with coding responsive grid systems, you can start using a framework (e.g. Bootstrap).
I am new to HTML and CSS development. I have created a html which looks fine on PC web browser.
However, when I use my Android cell phone browser to view it, since the cell phone screen is too small, there is a lot of sliding needs to be done to locate the area I want to bring into focus.
My webpage only has an index table in the center, while left and right of the body are all blank. I was thinking if there is any way to detect the browser to see if it is from a mobile device, then resize the body of the page?
Any advice is welcomed. Thanks in advance.
It is either:
you should take a look and learn at some responsive website code like this one.
Try to add this code after your opening head tag <meta content='width=device-width, initial-scale=1' name='viewport'/> if you don't want horizontal scrollbar on smaller screens.
The most popular method today is to use a CSS media query. Any code inside a media query will only apply to the parameters specified. This usually applies to height and width of the browser but it can also work for printed stylesheets, display resolution, and a few other things.
Heres an example that targets browser widths between 320px and 480px, common sizes for smartphones.
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body {
background: #999;
width: 100%;
}
}
You can find more examples here: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/