Today I added code to my websites head section to detect mobile device via screen size, code is:
<script type="text/javascript">
if (screen.width <= 699) {document.location = "http://m.mywebsite.com";}
</script>
It works great for me, but the problem now is when I am redirected to mobile version of website, I got there link to go to desktop version of site. When I hit it, I am redirected to desktop version and then immediately redirected back to mobile site, for the reason I have mobile website detection! :-) it is endless circle. How to fix this problem?
Size of the screen is probably not the best way to detect a mobile device. Take a look at http://wurfl.io/ and see if that is useful.
And yes, you need a cookie or some local storage to avoid the looping
Relying on screen size alone is not enough. In fact many modern smartphones have screens of well over 800 pixels wide. And then you also have tablets, smart TVs, consoles and e-readers. The best thing to do is use an existing solution like 51Degrees.com.
It’s easy to set up and the database is updated with new devices on regular basis. Detection is done on your server, which improves page-loading times for your users. Additionally you can use the image optimiser to handle image resizing when you redirect to mobile page.
For an easy, 4-step setup of PHP detector visit: PHP Getting Started.
Related
I have a react app that has many image references ( tags <img src=... /> and css background:url(...)) type.
These images are hosted on Azure Storage.
To speed up my App loading time on various devices (desktops and mobile), I need to resize these images before they hit the client, ie, on the server somewhere.
So far, I can think of the following options:
Pick each image, and produce multiple versions of them for various standard device sizes. Then, pick up each <img src=... /> tag, and, using JS alter the image name, such that the right size of image gets served. This will not work with css.
Use Azure CDN to automatically resize images. I was hoping that resizing would happen automatically, as the CDN portal retrieves the user-agent from the device. Does anyone know if this is true?
Serve images through an Azure function, resizing them on the fly (as suggested here)
Can someone suggest other options they can think of, or a pros / con of the above.
Since you're using javascript, use the window tag. For browsers, the window tab measures the resolution of the browser and you can set the height and width of your image to window.innerHeight and window.innerWidth. There are multiple other ways to do this but this is the easiest and most optimised if your coding project needs to be efficient with the least lines of code necessary.
More info about the window object here : https://www.w3schools.com/js/js_window.asp
P.S. this is only a solution for desktop, for mobile you can use screen.width, screen.height. This might not work on desktop but on a macOS Big Sur device it works, I tried it (This might be because macOS Big Sur is like a mobile optimised interface given that you can even run iOS apps on it but we don't know unless we try). That might be a better option as it is most likely common across all your devices.
More info about the screen object here : https://www.tutorialrepublic.com/faq/how-to-detect-screen-resolution-with-javascript.php
On the off-chance that none of them are common across all of your target devices, try making a detector program with which you can detect the device type and store that in a variable. Then create 2 if statements saying
if(deviceType = iOS){
<img src=..., screen.width, screen.height/>
}else if(deviceType = Windows){
<img src=..., window.innerWidth, window.innerHeight/>
}
Obviously this code won't work but it's just there to show you the flow where you can sort of understand what I meant. You need to integrate it your own way but this was just a way to make it easier as many times people mention that my answers are not easy to understand, just as a safety measure.
The best part of these options is that instead of remade copies of the image itself, this will resize the one, which saves storage space and eliminates the chance of the user using an unexpected display output like a 49" Samsung Odyssey G9 monitor where the resolution is extremely far from what you might have expected and resized. This also means you don't have to create a separate file just to make image resizing code, just the one to detect the OS (not necessary if the screen object works) which would've already been done since this is Azure we're talking about and they always detect their user base.
If you have any queries, please reply back.
Good luck!
I have a BrowserComponent that loads a web page that does something by ajax every few seconds (suppose thirty seconds, I don't remember how many). These ajax requests get updates and keep the login.
My question is how to make the web page working when the app is in the background: sometimes the app works fine, other times it's killed by the o.s. when it's in the background (I suppose so because sometimes, when I reopen the app, it restarts).
There are apps that are never killed, such as media players, e-mail clients, etc.: how can I make my app always running in background? Of course I suppose that the CPU loading of my app is very low, but I didn't find any way to compare its cpu loading with other apps.
Thank you very much for any help.
You would find that hard to do with a web browser. Various OS's have different behaviors but even Android which used to be the least restrictive is moving towards a more restrictive background behavior to conserve battery life.
In the misc section of the developer guide we discuss the background modes e.g. background fetch etc.
You can do that from Codename One code which compiles to native but you can't leverage that from JavaScript as it doesn't give the OS enough control.
I am planning to develop a hybrid mobile app using ionic. One of the features i need is offline google map. Is there a way how to do it?
It depends on the requirements of your application whether this will be possible. Are your users on "modern" devices A.K.A is HTML5 fully supported? Do your users need to view/edit the map globally, or just in a specific area? Does the map really need to be provided by google? I'll address some issues below to point you in possible takes on this problem.
Do you really need google maps? (Most optimal scenerio)
First of, do you really need google maps? Also relevant: how far do your users need to zoom their maps? If it can be any maps, and zooming is not really of high priority (if it is, including all map tiles will make the app eat all storage), you could probably use map-tiles as a packaged part of your app, and display them with a library like http://leafletjs.com/. The library is well documented, and provides a map-interface for a variety of map-providers. It will be do-able to configure this to use your own local map-tiles. You could include map-tiles for multiple zoom levels if necessary, and limit the min/max zoom-levels to the tiles you actually have available. This will make your maps work offline.
I can't or don't wan't to provide my own tiles make sure that you really looked into the option, there is systems out there that provide map-tiles you could use (check https://www.mapbox.com/ for example)
Okay, so you really don't want to do what I suggested. What are the options now? Javascript mapping-solutions typically render tiles based on the location of the map you want to see and the zooming level. These tiles are requested to the tile-provider. I do not know how to implement this for google exactly, you might need some research on this - I'll try to help you see a direction. There will be requests to get the tiles from the servers. I checked with http://maps.google.com what images are loaded when trying to navigate the map: (example (click)). Find out what url's are used in your situation, we will need these kind of url's later (just inspect the network tab in your browser console and see which requests are made when scrolling in your map). When we only need our users to work in a certain area when offline we could use service workers to cache the responses of these requests when we are online, and serve those caches when we are offline. Read more on service workers here (click).
Advantage: Real offline map-functionality for any tile you visited before (as long as your cache wasn't overflown, depending on your implementation of the service workers, and for service-worker supported browsers/devices).
Disadvantages: No support for tiles that were never put in the cache (AKA: never seen before). Another one: this will only work for devices that support service workers. Might be an option in situations where you either don't care about users using "older" devices, or where you can control the user's device choices. Note that using crosswalk could ease your developing efforts here, since you only have to consider one browser-runtime then: but crosswalk also doesn't support older devices.
However: This solution could be fine for people that will need to work in a specific area, which might be true for the case provided by #vipul-r If you or your users know in advance where they need their maps to work, you can instruct/help them in loading & caching their maps correctly.
If you can't work on either of these 2 solutions, then I highly doubt there will be a way to do it. I don't see any other way to the best of my knowledge.
I would like to have an upload control on an intranet website, which needs to support multiple file upload. Drag and drop is not required, I just want to select a lot of files (in hundreds, possibly) for processing on the server. After the uploads are complete the user will be redirected to another page where he'll be able to process the results.
I'd also like to support other browsers, but IE is the most important as most of the customers use it as per their IT policy and it cannot be changed. Their computers are restricted enough and Silverlight might be the way as it's official Microsoft plugin, compared with Flash.
I would like to have a form with a “Browse” button which allows the user to pick files, then the file names are added to a list and “Upload” button that starts the upload to a server side code that saves the file somewhere and redirects the user to the next page.
I think that I should use Silverlight for IE7/8/9 and HTML5 for Firefox, Safari, Chrome and Opera (and IE10, eventually). That would mean coding two separate (html5+silverlight) front-ends and one common back-end on the server.
I know that Telerik has something exactly like this and works, but it's too expensive as I need only one control of their library.
Is there something open-source that works this way? Or is there a better and simpler way to support IE and HTML5 file-compliant browsers?
Silverlight will work in all the browsers, so that's the way to go (right now). After IE 10 comes out, then HTML-5 might be a better choice.
flash is the solution, as flash 7 was shipped by default in windows xp.
but in the end something's got to give, it professionals will have to say no to corporations that have operating systems older than 10 years.
Look at this jquery plugin http://blueimp.github.com/jQuery-File-Upload/
I know this post is a bit older, but have you looked at pulpload or even uploadify? Both provide HTML5 and Flash versions.
Pulpload is somewhat more versatile, it seems, but I have implemented uploadify a few times, and the docs are ... good enough (I think version 3 of uploadify is much better, but I don't have experience implementing it, yet).
I am researching best practices for developing 'classic' style mobile sites, i.e., mobile sites that are delivered and experienced as mobile HTML pages vs. small JavaScript applications (jQuery Mobile, Sencha, etc.).
There are two prevailing approaches:
Deliver the same page structure (HTML) to all mobile devices, then use CSS media queries or JavaScript to improve the experience for more capable devices.
Deliver an entirely different page structure (and possibly content) to devices with enhanced capabilities.
I'm specifically interested in best practices for the second approach. Two good examples are:
MIT's mobile site: different for Blackberries and feature(less) phones than for iOS & Android devices, but available at the same URLs -- http://m.mit.edu/
CNN's mobile site: ditto -- http://m.cnn.com/
I'd like to hear from people here at SO have actually worked on something like this, and can explain what the best practices are for delivering this type of device-dependent structure/content/experience.
I don't need a primer on mobile user-agent detection, or WURFL, or any of the concepts covered in other (great) SO threads like this one. I've used jQuery Mobile and Sencha Touch and I'm familiar with most approaches for delivering the final mobile experience, so no pointers required there either thanks.
What I really would like to understand is: how these specific types of experiences are delivered in terms of server-side detection and delivery based on user-agent groups -- where there's one stripped down page structure (different HTML) delivered to one group of devices, and another richer type of HTML document delivered to newer devices, but both at the same sub-domain / URLs.
Hope that all makes sense. Many thanks in advance.
At NPR, we use a server side 'application' to serve up the correct html/css/etc depending on if the user is on a high-end device or a lower-tier phone.
So, when a mobile device pings an npr.org page, our servers use a user-agent detection method to point them to the corresponding m.npr.org. Once directed to the m.npr.org URL, the web app - which is written in groovy, but I think could potentially be a number of things - sends back either the touch version of the site or the more simple, stripped down content. The choice of the web app is made based at least somewhat on the WURFL data.
I don't have enough rep points to post a comparison with screenshots, so I'll have to point you to the sites themselves.
You can see this in your desktop browser by typing in m.npr.org to see the stripped down site. And you can override the default device detection by adding the parameter ?devicegate.client=iPhone_3_0 to see the touch version you would see if you just went to npr.org on your smartphone. If you view the source, you can see how different html & css is being served at the same subdomain.
Hope it helps seeing something like this in the wild. Does that make sense?
A common way to detect which format a mobile device needs is the accept header:
application/xhtml+xml > xhtml
text/vnd.wap.wml > Old wml wap pages
.
.
.
On newer devices which can handle all the desktop html formats, you can use the user agent.
Then you have to ask yourself what you want to do:
Switch to another Stylesheet (only works with newer devices).
Switch to another view logic, like building wml page templates.
Switch to a complete other page.
I think the second approach is the best one. Many web frameworks make it easy to switch to another view logic without rewriting the rest (the mvc pattern in its glory).
I have two examples for you.
Read up on how facebook achieves this using XHP to give abstract different output for different markups: One Mobile Site to Serve Thousands of Phones
There will be a lot of good stuff in their actual implementation which I wish was available.
I use a framework called HawHaw, which let's you write your app once (in PHP Objects or XML files) and it outputs the correct markup to the device based on a few checks (accept header, agent string etc).