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/
Related
I'm currently updating my website and I would like everything to automatically change size to fit browsers, mobile and desktop alike, while keeping the same ratio.
What is the best way to do this?
I've tried several methods but haven't managed to get any working, the pictures at the bottom of the page and the javascript at the top are causing the biggest problems.
I'd prefer a html/css option, but if there's a better way through javascript I'm fine with that.
Here is link to my subdomain I'm using for testing:
http://www.beta.trinity-international.com/
Thanks!
Please go with RWD (Responsive Web Design) approach using CSS3 media queries.
Media query:
Media query is a CSS technique introduced in CSS3.
It uses the #media rule to include a block of CSS properties only if a certain condition is true.
Syntax
#media (min-width: 700px) { ... }
Reference :
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Responsive frameworks :
There are some frameworks that can be used for creating RWD.
Twitter Bootstrap http://getbootstrap.com/2.3.2/
Foundation http://foundation.zurb.com/
Skeleton http://getskeleton.com/
Some things to keep in mind for responsive web design
Viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
Media query:
Media query is a CSS technique introduced in CSS3.
It uses the #media rule to include a block of CSS properties only if a certain condition is true.
For example if you want your website with different sizes for differnt screens :
#media only screen and (max-width: 1500px) {
html, body {
margin-left:2%;
margin-right:2%;
}
}
#media only screen and (min-width:1501px) {
html, body {
margin-left:5%;
margin-right:5%;
}
}
This does not change size but just the margin that increases for bigger screen sizes.
For more explanation on responsive check this link w3schools
I am building a widget which will display at the bottom of the webpage. This widget will only be displayed when a user embed javascript code to their webpage.
Basically, i am facing an issue with the styling part of the widget. I realize that the widget display differently on webpage with or without meta viewport tag specified.
<meta name="viewport" content="width=device-width, initial-scale=1">
Webpage with metatag viewport tag looks just fine. However, webpage without the metatag viewport tag looks extremely small.
I am using .em for my font size.
Below is a code snippet of my style.css
.mywidget li a{
color:#304FFE;
font-size:2.0em;
}
The main concern will be that i need my widget (style) to be compatible and seamless with mobile responsive or non-mobile responsive webpages.
Expert advice appreciated greatly. Am i doing it wrong?
I wonder how does companies like zopim does it!
https://www.zopim.com/widget
The chat button looks gorgeous even if your website isn't mobile optimized. It stays the same size and in the same place, regardless of how much you zoom. No matter what your customers are looking at, you are just a chat button away.
My Current Solution (Not the best in my opinion - looking for more insights)
I make use of css3 media queries. When i detect that no viewport meta tag has been specified, i include and link to my specific css (with media queries).
var viewport = document.querySelector("meta[name=viewport]");
if(viewport === null){
//create my media css element
}
In my media queries, i increased the font-size by a few em. E.g
#media only screen and (min-width : 320px) {
.mywidget li a {
font-size: 3.5em!important;
}
}
The problem with this solution is that i do not know how many em to increase. I would like the widget to look exactly the same in mobile responsive & non mobile responsive webpage. Any advice appreciated greatly!
If you really don't want it to change, you can use px as the value in font-size. I was looking into the zopimchat widget, which I think is what you are referring to on their page.
"We're online" has font-size defined as font-size: 18px;
The input has font-size defined as font-size: 12px;
I viewed both values using Chrome DevTools.
If you HAVE to use ems, it's helpful to review mdn's definition (link is to full definition):
The size of an em value is dynamic. When defining the font-size property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is probably 16px.
So if you are't defining the font-size at .mywidget, then you are dependent on the webpage that is calling your widget. If you define it there, then li a will inherit from .mywidget and give you some control, but you'd have to give it a fixed value, which again gets you back to pixels instead of ems, just somewhere else.
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 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.
I am using this code to auto resize images to the window size on a mobile page:
img {
width:100%;
max-height : auto;
max-width : 480px;
}
My intention is to show the image in the right size of the window on small screens and max 480px on bigger screens maintaining the ratio.
But for some reason i dont know when i use that code the text around the image goes behind it.
Theres a way to achieve this result using another method like Java or Jquery and avoid this problem?
If you do this for mobile devices I would recomend server resize to save download size.
Regarding the text that goes behind, do you have a more comprehensive testcase showing the actual document this CSS applies to?
You'll end up with squished images if you do that. I think this gives the best result you can achieve with CSS:
#content img {
width: 100%;
height: auto;
max-width: 480px;
}
I added this code in my page and it's working:
img {
width:100%;
max-height : auto;
max-width : 480px;
}
Have you tried using different style sheets for different screen sizes? Then you would just need to write the code for each situation and then load the needed style. It would also come in handy if you have other styles that need to change based on size. Very helpful on mobile sites.
<meta content="width=device-width, initial-scale=1.0" name="viewport">
helps to make sure it scales right. Not sure how helpful it will be, but hope this link helps.
CSS trick for specific style sheet
I've also played around a little, and it seems to work if you set the image as a percentage. I floated one to the left of text and at 50% of the screen and it re-sized text and all. If you need me to post an example, just ask.
use #media to do manual change by the mobile, tablet or desktop size.
by the way mobile and tablet will have landscape and portrait. if you using google chrome to check you can determine it better. sample of website : Media Queries: How to target desktop, tablet and mobile?