I wonder how to add css and javascript code only when the site is accessed via smartphones.
Currently I'm using media queries, but it does not solve the problems, because currently some smartphones already have higher resolutions than even some tablets and desktops.
You can use feature detection via. Modernizr to check for touch events.
Alternatively you can use user-agents - check out http://detectmobilebrowsers.com/
The best bet however is to design your website using fluid grid website design so your site adapts well to mobile, tablet and laptop/desktops.
If you are trying to detect high-resolution screens (which doesn't just mean smartphones!), use the device-pixel-ratio media queries: http://css-tricks.com/snippets/css/retina-display-media-query/
What about smartphones are you actually trying to detect?
If possible, try checking the User-Agent HTTP header on the server side, and dynamically include the necessary css and js files.
You can check the browser's user-agent to see if the user is connecting from a smartphone.
Check out this relevant post
Related
Is there a way I can call on different javascript files or lines depending on which device you view the site on? Like media queries for css.
there are a few general approaches to this:
enable features based on browser capabilities
check the user agent string on the server and return different scripts
detect IE with special comments
I recommend the first approach using modernizr http://modernizr.com/
EDIT:
detecting a touch aware browser with modernizr:
modernizr will add class="touch' to the body
$('.touch #popup).hide() // hide "popup" only on touch devices
Devices in context of platforms such as android, iphone, ipad, ie mobile etc, we can simply check as:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// here is your javascript code....
}
Hope, devices means to be worked as above....
I'm building an in-browser application for my company's internal use. It would be helpful if my users could quickly switch between 6 different browser dimensions. I've tried using window.resizeTo, but it seems most modern browsers are disabling any sort of coded resizing. Safari seems to be my only exception for Mac users, but I'm concerned that they too will follow suit with Chrome and FF.
Is anybody aware of any work-arounds or user opt-ins? I've found a Chrome extension that can get the job done, but ideally there wouldn't have to be any sort of configuration or 3rd party extensions as some of my users have very strict permissions on their machines.
No, that's not possible. Otherwise all kind of ads would ask the user to allow them to resize themselves in the hope some people allow it (and thus most likely allow it for the whole adserver used by tons of websites).
You could wrap your application's content in a <div> with overflow: scroll, and resize that actual div. If your application's styles do not allow that, you can wrap it in an <iframe> with the viewport size you want to enforce.
So I'm trying to build a mobile and desktop version of a website simultaneously (using a MediaWiki engine, if anybody is interested). Since I don't have much experience with mobile device building, I was looking around for some good mobile development practices. In the end, I feel media queries are good for what I need to do, mostly because double-publishing on separate domains (like m.foo.com vs foo.com) is not possible for this task.
The shortcoming to CSS media queries, it seems, is the apparent inability for phone users to view the site in desktop format whenever they want to (Google or YouTube is a good example of this when accessed using a phone).
Is there any way for me to freely toggle between desktop and mobile stylesheets developed with media queries? Would using javascript be too bulky for a mobile device to download?
I appreciate any suggestions. Thanks!
EDIT: For clarification, yes, I want to click a link or button on the mobile style to switch to a desktop style.
I'm 90% sure that it is not possible with CSS alone but can easily be accomplished with PHP or Javascript. It shouldn't be too bulky to use javascript.
Some examples
PHP Style Switcher.
Javascript Style Switcher
Jquery Style Switcher
I m designing an appliaction for mobile phone. Do I need to write different set of code for both the orientations of mobile? Please suggest some ideas.
Thanks
You have to use media queries css to design both orientation and have a look on this url
CSS-Tricks: Media Queries for Standard Devices
there are two ways if you are making you style sheet in pixels then you have to make separate style sheet but if you are using percentage then your style sheet works in both orientation
If you are developing a web application for pc, you need not to worry about the code related with application.All the code for pc version will be active for mobile too.But you need to worry about the page layout-for this you can build a separate mobile version or you can build a mobile compatible website by using separate stylesheet.
I will recommend you to build a separate mobile version page.But still you need not to modify the code related with application.
For mobile page, you can use jquery mobile framework
Good to see some ways you can refer here!
I have a webpage that is quite wide and short on about 3 pages, the pages that are wide and long display fine on a mobile phone browser, but the pages that are short show up on only less than half the screen.
Is there anyway I can make a seperate page for each of those 3 pages and have them come up only when someone is using a mobile phone.
Thanks
You need to insert some JavaScript that will sniff out the User Agent (web browser & version) on each page. Here is a link that explains how to do this:
http://www.quirksmode.org/js/detect.html
Once you have done that, then swap your CSS file for that page to the one appropriate for the device, or redirect to a special HTML page for that device.
If you search Google for 'Responsive Design', there is lots of advice on how to use the same page, but make it appear differently on mobile devices.
Along with "responsive design" you should investigate "media queries" which will allow you to adjust your CSS and help align the elements to the display size of each device viewing it. No javascript necessary.
How to use Media Queries in Mobile
Like others have stated. Responsive web design with Media Queries is best. Check out these sites.
http://www.alistapart.com/articles/responsive-web-design/
http://www.stuffandnonsense.co.uk/projects/320andup/