CSS mobile media styles with manual toggling - javascript

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

Related

Displaying a mobile version of responsive component without resizing the browser window

Making a document for the designers that displays the desktop and mobile examples of each visual component in a style library. Client wants to see the examples of each on the page at the same time.
Currently doing this by putting it in an iframe, similar to here. Unfortunately the iframe solution is causing odd complications and side-effects.
I was wondering if theres a better/simpler way I can tell the container of the mobile example to use the mobile breakpoint media queries?

Is JqueryMobile layout run on both web and mobile

I make a website in php at backend and HTML,CSS at frontend.Now the requirement is to make it compatible for also mobile.I am thinking to use JqueryMobile but I am confuse that same layout work for both or make different for both.
Is layout make by JqueryMobile cover both ends?Is I make separately JqueryMobile layout?
According to the jQuery Mobile description:
jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.
Then, the same layout will work in both mobile and desktop browsers. Despite that, you should consider how your website looks in desktop browsers if you want to provide different functionalities in each platform.
See here.
jQuery mobile works for both mobile and desktop, but whether or not it looks good on mobile will also depend on your layout in CSS.

Custom App start Screen

I am trying to create a mobile app with HTML5, CSS, and JavaScript and want to use Phonegap Build for compiling it for the mobile devices.
So most mobile apps in an App Store have custom start Screen when you start the app it shows you at the beginning the Company logo or game logo. So how is it possible to do it with HTML5, CSS, and JavaScript.
I already searching use the search engines with may keyword combine with Phonegap or Titanium to get an example or an idea how to do that.
But nothing, so many maybe you could give me any advice.
The documentation for the splashscreen is in the link below. Not used phonegap build but I assume you configure it in the same way.
It is done by an image rather than html & css.
http://docs.phonegap.com/en/3.5.0/config_ref_images.md.html

How to add js and css only smartphones?

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

do I need to write different set of code for both the orientations of Mobile phone?

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!

Categories