My Web application is meant to be used on desktop computers and also on computers that are connected to TV screens.
I would like to apply different styling in these two different cases, but simple media queries do not work here: TVs resolutions are even smaller than computer monitors, even though the screen is much bigger.
Is there any way to detect such a scenario and apply proper styling ?
there is a CSS media query to check if the client screen is a tv
#media tv
(instead of #media screen for a classic computer screen).
There is also #media projector.
Suggest to take a look at CSS Units, especially the ones beginning with v, which are relative to the viewport's size...
Related
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 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
Consider the following site: 200minus.com
This site looks good on both a mobile phone and a desktop. It's as if when you view the site on a mobile phone, everything is appropriately shrunken. Where in the source code (HTML/CSS/JavaScript) is this being dealt with (or is this typically dealt with)?
In the CSS as media queries.
You can adapt the layout of CSS styling, depending on what size the browser window it's being viewed with is.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries, and
the official W3C documentation: http://www.w3.org/TR/css3-mediaqueries/
Theres 2 typical approaches to page design in mobile/desktop situations.
Adjust the page to suit the size of the display at load.
or...
Make the page respond to it's size dynamically( This is referred to as responsive design).
It is considered good form to use responsive design, as it has obvious advantages for screen resizes. Such as if a tablet/mobile was rotated or if a desktop user resized their window.
A good design should be implemented predominately in css as it is the fastest part of the page to update/ evaluate, and is simpler to implement than modifying the page style than JS. Proportional layout and forward planning help considerably when it comes to producing a layout that works well on many screen sizes and many guides will instruct you to design for mobiles first, then adjust for desktop sites. Personally I try to think of them as one part that is never a fixed size.
The bread and butter of responsive design is media queries; they allow you to only active certain css rules under one or more conditions. For example:
#media (min-width:650px){
.about_tablet{height:175px;}
}
#media (min-width:650px) and (max-width: 675px){ /* both conditions must be met */
.about_tablet{height:175px;}
}
#media (min-width:650px) , (max-width: 675px){ /* one or both conditions must be met */
.about_tablet{height:175px;}
}
Another very useful trick is viewports
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width" />
They can be a little strange, behaviour isn't uniform across older mobile devices and they don't work at all on desktops, but they are quite useful. You can force a page width and scale the page on a pixel by pixel basis (800 px image on a 400px wide screen for instance). Prevent the user from being able to zoom in, or limit the zoom. Most useful is the width=device-width" which prevents the horrible zoomed out effect you get on non optimised webpages when you view them on a phone.
If theres a more specific concept you want to talk about I'm happy to help, a vast majority of my work is done for mobiles.
This is simple Bootstrap. Just try it out! I think it's really good. Also mentioned in the answer above this is everything done with CSS. For example this:
#media (min-width:768px){.container{width:750px}
}
#media (min-width:992px){.container{width:970px}
}
#media (min-width:1200px){.container{width:1170px}
}
When the width is smaller than 992 px the container will be set to 750px.
Greetings
In CSS using media queries, as explained here:
http://css-tricks.com/css-media-queries/
For example:
#media screen and max-width:600px { /* CSS here */ }
Is a common brakepoint that I use.
For some specific handling I've found I have to use javascript or jQuery to really get the effect I want, but generally CSS media queries and some intelligent and creative use of showing/hiding objects with the display property will get you 99% of the way there.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I'm looking for someone to steer me in the right direction. I have a functional web page that runs crisply on my 13" MacBook. The issue is viewing the web page at different sizes and how the elements get distorted. What kind of things need to be done to ensure it looks crisp and beautiful on any screen size. Does it require me to use percentages when detailing height and widths of elements or does it require some javascript.
I realize this is broad and all im looking for is someone to steer me towards what should be changed so I can get the site live.
Thanks!
General direction:
You want to check out media queries to make your design responsive to different viewing media. You will want to consider other meta tags such as ones defining the viewport size, but in general you can do it all with CSS.
Here are example queries that can wrap your custom CSS rules for each device size:
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {}
Obviously you will want to fill-in the CSS rules as needed to ensure your content doesn't get scrunched.
A good strategy is to design for small mobile application, then go bigger from there. That way you don't find yourself trying to cram way. too. much. into a small interface.
In general you can also use the float:left; property for your main layout blocks (instead of absolute positioning, etc) That way your sidebar, etc will float above/below your main content when the parent element is too narrow to have both side-by-side.
Also, yes. You can use percentages, etc to fill areas fluidly. Use background- properties instead of <img> tags. Hope that helps.
I guess you may take bootstrap as a refer!
It is responsive, and will display almost the same on different resolution screen!
So try something like this.
and if you want to make your site looks like the same on all screen, try precentage!(but not suggested!)
You will need css3-mediaqueries for responsive designs or fluid designs
We Can assign different stylesheets depending on browser window size.
You must know How to use CSS Media Queries & Using Available Space
Have a go here
What are CSS Media Queries
and how to implement them.
too
I thought of not editing my answer any more, but i have got some good points to change my mind From http://www.webmonkey.com/2011/06/tips-tricks-and-best-practices-for-responsive-design/
Use #media to scale your layout for any screen, but remember that
this alone isn’t really responsive design.
Use liquid layouts that can accommodate any screen size. Don’t
simply design one look for the iPhone/Android, one for tablets and
one for the desktop. Keep it liquid, otherwise what happens when
some new, intermediate screen size suddenly becomes popular?
Roll your own grids based on the specifics of your site’s content.
Canned grid systems will rarely fit the bill. The problem with
canned grids is that they don’t fit your unique content. Create
layouts from the content out, rather than the canvas (or grid) in.
Start small. Start with the smallest size screen and work your way
up, adding #media rules to float elements into the larger windows of
tablet and desktop browsers. Start with a narrow, single-column
layout to handle mobile browsers and then scale up from there rather
than the other way around.
Use the Respond or CSS3 Media Queries JavaScript libraries to
bootstrap #media query support into older browsers that won’t
otherwise know what to do with it. Starting with the smallest screen
and working your way up means it’s the desktop browsers that need to
handle #media, make sure older browsers work by using polyfills like
Respond.
Forget Photoshop, build your comps in the browser. It’s virtually
impossible to mock up liquid layouts in Photoshop, start in the
browser instead.
Scale images using img { max-width: 100%; }. For very large images,
consider using something like Responsive Images to offer the very
smallest screens smaller image downloads and then use JavaScript to
swap in larger images for larger screen.
Embrace lazy loading. There may be items on your site, auxiliary
content that’s nice to have, but not essential. Load that content
using JavaScript after the primary content is done loading.
Forget about perfect. Even with these suggestions you’re still
leaving out users who have old browsers with JavaScript disabled.
Such users are increasingly rare and if they see the mobile layout
on their desktop, guess what, it’s not the end of the world. Your
site is still perfectly usable.
Can anyone recommend the best way to target different mobile screen sizes?
I have tried media types but it doesn't work properly, so wondering whether a javascript method would suit?
We basically want a client side solution that will serve different style sheets for different screensizes, depending on the connecting device.
Any advice gratefully received!
Thanks
Paul
Take a look at www.columnal.com
A responsive CSS grid system helping desktop and mobile browsers play nicely together.
or cssgrid.net
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
Just to name two.