I'm creating a website for mobile users as well as for pc users. I want this website to be viewed properly on both these end users. I'm now basically looking into the part of mobile users. When i load the page on my mobile, it seems to be a way too bit smaller. I need to reduce the whole body size of the page or its resolution to fit the mobile.
When i checked the mobile version of google(here), it seems to be smaller in the pc's browser, where as it fits the mobile browser.
What is the method i've to use???I'm using Xhtml with support of javascript and css to build the website
You can easily specify multiple style sheets for different media types:
<link rel="stylesheet" type="text/css" media="handheld" href="foo_mobile.css">
<link rel="stylesheet" type="text/css" media="screen" href="foo_screen.css">
The relevant media types here are probably screen for normal viewing at a computer and handheld.
You can also specify a style sheet with media='all' and then apply specific styles depending on the media type in other style sheets if you don't need to re-style everything.
Consider specifying sizes in relative units like % and em. This way everything scales relative to available screen size. This is a good idea anyway since (without JS) you can't know how big the users browser window is. Use min-width if you want to prevent things (namely fonts) getting too small.
The only real issue with this approach is images, since they look best at their natural sizes. SVG gets around this issue for vector art but using CSS media targets as stated by Johannes can resolve this for mobile as well.
Related
I am using cordova based mobile app which will load my web application into mobile as mobile apps. I set the font size in my web apps using pixels and notice that the font size will change according to mobile font size setting...is there any way to prevent font size change according to mobile font size setting using CSS/JS?
This should work. I did a quick search for the most up to date info and it does turn out that this is still not supported by all browsers. Possibly worth a try in your CSS though.
text-size-adjust: none;
One basic answer would obviously be tex size adjust and aset it to null but in cordova you must read the documentation to control app behaviour
Sometimes this might happen because of the way pixel's are rendered on a mobile device.
Adding the below line makes the rendering consistent.
<meta name="viewport" content="width=device-width, initial-scale=1">
Reference:
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
I'am having trouble changing CSS file paths if the end user is accessing my site via a PC or mobile device, below is my CSS, I thought that it would redirect the user if using any handheld device:
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/mobile.css" media="handheld" />
Please can someone let me know if this is the correct way or should I be using javascript to manipulate my file path>
Dont make life too hard on yourself going that route of detecting a browser and device type..
Go with Media Queries..
#media only screen and (max-device-width: 480px)
All devices are now all well known but regardless the resolution will determine the css style you offer the client..
A Lot more can be found here : MediaQueries
I would suggest MAYBE bootstrap3 framework // foundation etc there are a lot to choose from but these are the top two which come with built in definitions and a good framework to write css for each!
What you want to focus on is the grid system..
such as Bootstrap They work of a col-size-n grid of 12 colums, responsive.
A Lot more documentation can be found there and it opens a world of other questions!
:)
Well, the proper way would be Media Queries.
As mentioned by another individual on your question, if your truly trying to utilize Javascript:
function Resize() {
width = window.innerWidth;
height = window.innerHeight;
if(width < 1200 && height < 600) {
// Modify particular Stylesheet elements.
}
}
Obviously you can do measurement / comparison:
Browser Inner Width / Height
User Agent
Those are two examples, but really Media Queries would be ideal and proper. Won't go into detail on those Media Queries, since someone went into more detail.
I'm familiar with coding but I have severe time constraints and would rather not revisit Javascript for this issue. Any suggestions on how I can cut down the effort needed to load the different fonts? Much appreciated thanks!
Sure, you can do it in CSS, using #media rules to set different fonts based on the screen size. Here's a good source of information: http://css-tricks.com/snippets/css/media-queries-for-standard-devices.
I'd set the desktop font first, then override it with #media queries with your phone font.
I am running into some issues determining the type of browser using Javascript. My current method is to capture the screen width and height and determine the type of browser based on pixel sizes.
I figured I could assume that any screen width under 768 would be mobile, anything under 1024 tablet, and anything above that a desktop.
I've started testing on a few devices I can actually get my hands on and the results are much different. For instance on an android (Droid Bionic to be exact though it doesn't matter much) its returning a width of 980 regardless if the device is in landscape or portrait mode. This is much higher than I assumed.
Currently I am using document.documentElement.clientWidth to determine the width but I have tried other approaches such as window.innerWidth as well.
I guess what I am trying to get at is a question that has been asked many of times and I thought I had a pretty clear answer to. Apparently it might be time for a refresh on proper browser/device detection. So what is the most effective way to determine the actual size of the device I am on?
UPDATE:
It seems as if mobile browsers are actually taking it upon themselves to decide how to display my application. And in fact they are, but there is a way to stop it. See answer. Fortunately this means that the standard feature detection methods we are used to are still the best way to determine the device you are using.
Per Dagg Nabbit's comment on the question:
It seems that mobile browsers take it upon themselves to determine the way a site is displayed. This typically means taking a desktop version of a website and zooming out to fit the contents on the screen. For 90% of the internet this is necessary otherwise the mobile browsing experience would be horrifying. For responsive websites this is no good because in most cases we have very specific elements that must be altered depending on the resolution of the device the site is being viewed on. So how do we stop the browsers from doing this?
By using a viewport meta tag. The standard tag looks something like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
But there are a lot of different ways you can customize this to suit your needs. A good reference is https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
This sounds a bit too good to be true, so please tell me if it is.
If I have just one single version of a mobile website (no variations for
different devices, just one website for all mobiles), how reliable it is
to detect mobile devices by screen resolution?
And simply serve the mobile version if screen resolution is < than say 400px.
NOTE: My question assumes that javascript is enabled. Also,I'm aware there's
user agent detection, but I'd like to do without it.
Javascript mobile device screen detection for height is not reliable at all. The problem is that different browsers use different amounts of 'chrome' and different OS versions use different heights for the system bar. All the detection mechanism report unreliably for height (screen.height, window.outerHeight, window.innerHeight - etc,etc)
Width seems to be most reliable on window.outerWidth across all OS's.
Read a most excellent analytical report here:
http://www.tripleodeon.com/2011/12/first-understand-your-screen/
You will want to look into serving different stylesheets via media queries. You can use queries to identify screen widths and only serve certain css to certain devices. For example this query would serve a iphone.css only to devices identified as having the typical dimensions of an iphone:
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />
There's a detailed article on this subject over at alistapart
Bear in mind though that not all devices recognize media queries. If you need to support lots of older devices like blackberry's and flip phones you should take the advise above for using UA detection - I know it feels wrong if you're coming from the desktop development world but really we have to use the tools we have available to us and Mobile Web is a growing but in many ways still a new horizon.
I came here because I had the same idea and question, and similar situation - the website already requires JavaScript and I'm doing a one-size-fits-all mobile web app, at least for now. Our release cycle is really long - any UA detection I hard-code will be somewhat obsolete by the time the code is tested and released. Since the purpose of this alternate interface is to make it work on smaller screens, it would seem to make sense to use that test.
I don't know however, what size I would pick - I have a hunch mobile devices are not bound (even by convention) to particular screen dimensions. I guess we just have to decide at what point the main web page is no longer functional.
I can understand other people's hesitation to this approach because sometimes there are other issues with a standard site on a mobile device than just the screen size. However, I think there is an advantage to this kind of detection. If your only issue is the screen size, I think it is a good way to go.
Probably not going to hurt to add this functionality to your website for those who are indeed running JavaScript enabled web browsers on their mobile devices. As for those who are not, well there's little you can do about them, other than something simple like letting them select their screen size at first load? Maybe a simple drop down list with possible sizes?
It depends on what you want to achieve.
If you design for different screen resolutions regardless of device type then it is fine to use resolution ranges.
If you design for specific device types (phone, tablet, etc.) and assume a resolution range will always match a single device type, then it will eventually break.
You used a 400px threshold in your example, the Galaxy S8+ reports 412x846 with this code:
console.log("width: " + screen.width + ", height: " + screen.height);
Device resolutions change every year and they are starting to overlap with each other. Large phones have higher resolutions than small tablets and large tablets have higher resolution than some desktops.
You may get away with it if you just want it to mostly work or if you want to detect specific phones.
However it is not reliable to use screen resolution alone to detect the device type.