I am using tinyscrollbar to replace the standard scrollbars on desktop versions of my web app. The main reason for this is so that i have a consistent and nice design across all desktop browsers. On an android, mobile ios device and windows mobile device i would just want to use the native scroller. This means that i wouldnt want to include my scroller css nor the javascript for it. If anyone has any experience with this it would be very helpful. I worry about windows 8 machines becuase they are desktops and tablets.
for conditionnal loading, I suggest Yepnope, it is the script loader used in Modernizr (so if you use Modernizr, it's probably already there).
Modernizr.load({
test : Modernizr.touch,
nope : 'slick-scroller.js'
});
Related
I've seen a bunch of stack overflow questions answered that address the problem of showing a desktop version on mobile, but I'm trying to discover how you could force a browser to render a mobile version of a site on desktop.
But is there some equivalent for desktop versions, so that I can 'trick' the browser into using media queries for a smaller device width? Essentially loading the mobile css onto the desktop version.
In essence I'm trying to add a toggle button that when clicked renders my page as though it were mobile. I'm aware you can achieve this affect with chrome tools, but I want to build in that functionality, and am struggling to figure out how to tell the browser to behave as though the viewport were mobile-sized.
Thank you!
if your CSS media queries doesn't work fine on desktop,
you're probably missing
<meta name='viewport' content='width=device-width' />
and if they work fine but you want your website to has same view in both mobile and desktop, then why are you using media queries at all?
remove them and your CSS will work on every size as the same
load the site on your mobile phone, take note of the url. If it has a "/m", for example, "https://www.example.com/m" then include it as such in your desktop browser and the mobile version would be loaded. It works for me.
I have seen very many questions asking how to detect if a device is mobile or not. Generally, they fall into 3 categories:
Check the screen size/viewport
Check the User Agent
Use a library, such as Modernizr to work around browser capabilities.
After implementing what I could, I still run across a situation which I have never seen asked or addressed; On many mobile browsers, there is a "Request desktop site" (Chrome) "Desktop Mode" (Dolphin) or "Desktop View" (HTC Sense).
I have chosen strategy #1 above, which works unless the page is viewed in desktop mode. Implementing #2 has drawbacks (spoofing, uncatalogued agents, etc.).
Is there a reliable (cross browser) way to detect Desktop Mode on a mobile browser with Javascript? jQuery or other libraries would be okay, but it should be based upon feature detection, rather than an array of User Agents.
So, Finally I have proven method to detect this. There's little tricky but got Exact Solution.
STEP 1
Install device-uuid Library , ( Here already mentioned. How to install )
<script src="https://raw.githubusercontent.com/biggora/device-uuid/master/lib/device-uuid.min.js"></script>
<script>
var user_configuration = new DeviceUUID().get();
console.log(user_configuration);
</script>
// output
// {"isAuthoritative":true,"isMobile":true,......"resolution":[980,1104],"browser":"Chrome"}
STEP 2
Detect device width
var curr_width = parseInt((window.innerWidth).toFixed());
STEP 3
Now need to compare curr_width with user_configuration.resolution[0] (width)
If both are same then this is normal view and if not then it's "DESKTOP VIEW" . attaching screenshot.
if(curr_width == user_configuration.resolution[0]){
alert("normal_view");
}else{
alert("desktop_view");
}
Screenshot of Desktop Mode ON in mobile browser
Screenshot of Normal mobile view
There is no way for a webpage to detect whether the device is actually a desktop computer or not. When "Request desktop site" is enabled, the phone acts just like a desktop does. One way to check this is to check the OS of the device. However, some phones use windows as their OS, so this won't work on windows phones.
So I have an existing desktop html site, but I've created a jquery mobile version. The thing is I'm trying to figure out how to load only the jquery mobile version for mobile phones, but show the desktop version for desktops. I couldn't find anything on the jquery mobile documentation.
You can essentially do with with jquery using the window width or by triggering it on CSS media query breakpoints. A few references below:
Triggering jquery with css media queries
http://www.venveo.com/articles/view/quick-tip-jquery-media-queries
I am however now sure of the ramifications of making it responsive... once jquery mobile kicks in, all bets are off.
You are probably better off calling the jquery mobile on a browser detection rather than a screen breakpoint.
I am trying to change the display of my web pages depending on the version of the browser and space on screen. I need to completely change the look of the pages as follow:
If the site is displayed on a mobile phone I want the mini version.
If the site is displayed on a desktop browser but the size of the window is too small I want the mini version.
If the site is displayed on a desktop browser and the window can accommodate the full version I want the full version displayed.
If no javascript is available the full version should display.
I just started with some pretty basic code which relies on userAgent:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) )
Is there a clean way to achieve what I'm trying to do with JQuery for example?
Use CSS media queries. Sniffing the user agent is not reliable, and will lead to maintenance headaches in the future. Also, using media queries means no javascript is required which is good from a separation of concerns point of view.
I have a jQuery script I'm using on a site to allow fixed position background images on iPhone/iPad/iPod. However it seems to be clashing with another script I am using on the site that enlarges background images full screen. Luckily they're independent of each other, I don't need the clashing background image script to work on iOS devices and vice versa.
Is there a way I can specifically target IOS devices to serve a JS file? I initially thought about using some kind of IF statement and doing it on window size but that started to get a bit complicated and affects other non-IOS devices. It just needs to run something like this...
..."if IOS device then load scroll.js"
I know device/browser sniffing is frowned upon but I can't think of another way around this problem.
You can use the Mobile Safari user agent string to detect mobile safari server-side, see: How do I detect Mobile Safari server side using PHP?
You can also do this in JavaScript:
if(navigator.userAgent.match(/(iPhone|iPod|iPad)/i))
See iPhone & iPod Detection Using JavaScript for more information.
You can use Detect Mobile Browser (it has a library for javascript).
you can also try this
if (navigator.userAgent.match(/like Mac OS X/i)) {
alert('Hi, you\'re browsing from an iOS device.');
}