Hi sorry if this is already asked. But I looked around quite a bit.
The methods I have found for detecting if a web user is using a mobile phone don't seem very nice. They are: look at the user agent string (hackish), look for a narrow width (but what's narrow?).
Is there a direct way to see if the browser supports the <meta viewport...> directive?
I think that would be the best way.
Because that's what we want... If the browser supports viewport (i.e. is mobile) use it. Otherwise not.
Try this one:
http://detectmobilebrowser.com/
The meta viewport is seems to be implemented differently from the CSS attributes, so any solution involving reading the viewport width before specifying it may not be portable.
Related
I found this library for responsive CSS on github and then I started to ask myself... is Elm responsive? Theoretically, Elm does anything that HTML, CSS and JavaScript can do... I do not see any ways to read inputs such as operating system or screen size. And there may be other factors I am neglecting.
Perhaps one can write a port?
I have seen at least one case, F# where outside effects or requirements are handled by comonads but that is rather sophisticated solution. Here is a blog on co-effects which talks about Context-aware programming. It sounds sophisticated, but it's exactly what we want in responsive web pages.
Image from Wikipedia.
Most of responsive design is going to come from CSS via #media queries, so the main job of Elm is just to output HTML that isn't hard to style (e.g. avoiding tables for layout or inappropriate inline styles).
If you're wanting to dynamically do something based on the screen size, you can use the Window package, which can either issue a Task to retrieve the current size or subscribe to resizes events.
In general, I would expect that the output of an Elm program won't conflict with implementing a responsive design.
Here you find a step by step instruction how to create a responsive page with Elm: Responsive Design with Elm Style Elements. It avoids juggling with CSS but adjusts the HTML output.
I'm using the Google Translate widget ( http://translate.google.com/manager/website/ ) on my website. It works fine on the desktop screen, but it uses the exact same layout on mobile and other small screens, and looks terrible. For one thing, the iframe containing the list of languages has a hard-coded width of 860 pixels. You can't select any languages beyond the 3rd column because they're off the edge of the screen (and you can't scroll to the right to see them because the browser doesn't realize that the iframe is too wide -- I assume it's the same problem as discussed here: Webpage with wide iframe is not scrollable on an iPhone with viewport ).
I've looked into fixing the problem using CSS, but CSS can't "see" inside iframes. I've searched all over stackoverflow and the rest of the internet, and not only have I not found a solution, I haven't been able to find anyone else complaining about the problem. I can't be the only one, can I?
I found a solution: Instead of "Dropdown only" layout, I chose "Horizontal". When you do that, Google uses a simple drop-down list instead of a big iframe.
The little panel that appear at the top of the page is still too wide to display properly, however, but that's a minor issue.
I used Highslide JS about 5 years ago on this site: http://wela.ctc.edu/academy12-13.aspx (example page). Now I'm redesigning the site use Twitter.Bootstrap and am trying to figure out how I can tweak the Highslide popups to work in a small device width. Is this possible or should I use find another solution to implement? I've played around with the setting parameters in my highslide-with-html.js file, but the results have been unsatisfactory. If it is possible to use Highslide in a responsive design, would be grateful for any URLs to look at.
The short answer is that Highslide adapts very well to small devices if you're opening images. The expander is purpose-built to do just that - display the image as large as it can without exceeding the boundaries of the viewport.
But when opening anything else - an expander with HTML content, an iframe, etc. - the expander must initially be a fixed size. You can put a resize handle on it, but that's not really good enough for handling everything from a smartphone to a large monitor.
Without rewriting Highslide JS, overcoming this limitation would require that your page do its own detection of the viewport size, then either modify the call to htmlExpand() on the fly, probably with some jQuery manipulation, or change the .highslide-html CSS class width. The latter approach (targeting the CSS) seems like it would be easier.
In my app, there is going to be a page that occupies the whole window (i.e. you can't scroll in any direction, the page resizes itself to the window size). I'm sure I can do some CSS trickery to achieve that, but this page is also going to contain some resizable areas. Basically there will be a sidebar that the user can make wider (within a min-max range).
Essentially what I'm trying to do is recreate this page if you select "Border" under Basic Layouts. I'm at a bit of a loss about how to do this. Should I try introducing some jQuery UI, or is there a purely AngularJS was to do it?
I know I haven't provided any code, so I'm not expecting anyone to give me the full working code. But a nudge in the right direction would be great!
No, there isn't a "pure" AngularJS way to do it without writing some new code or adding a framework to the mix such as you mentioned. I'd suggest looking at the more popular UI frameworks and see how they fit (maybe jQueryUI, or even Sencha).
Additionally, you sh/could write a directive to wrap your usage of the component to black-box it a bit more and be in the spirit of AngularJS (& so that you could more easily replace it in the future).
Given that type of functionality can be a bit tricky to create cross-browser (depending on browsers supported), it's probably best left to others who've done it.
A bit late but guess it is what you wanted AngularJS UI Layout
A borderlayout or splitterlayout plugin with AngularJS.
So I am creating my first webpage catered to mobile browsers. What are some things to consider?
How do I get the resolution right for different devices (Blackberries, iPhones, iPads, etc.)? Is there a common method that people are using? Some sort of framework?
How do I prevent zooming (on most touch screen phones, you can zoom in by pinching)?
What are some other things to keep in mind?
There are a ton of good practices to follow. Here are a few:
make the content shorter and easier to read. People can only scroll so much and read so much on a smaller screen size.
develop all your content in one single column. Make the width flexible (100% or close to it) so that it expands to fill the screen Do not make people horizontally scroll the page.
do not use a lot of a) scripts, b) css stylesheets, c) images. These require lots of downloading and will increase the page load time and the cost for the user (as most people on mobile pay per KB for Web browsing). Consolidate / gzip your files.
in your css, add extra line-height for easier reading.
in your css, add extra letter-spacing between numbers in phone numbers, for easier reading.
retain a link back to the full site, for those who want the full content.
include a back to top link at the bottom of the page, so users do not have to scroll all the way back up.
add padding to a hrefs so that it is easier to click/touch a link.
use HTML5 form types so that modern browsers will use the appropriate keyboards... http://diveintohtml5.ep.io/forms.html
Just create normal web pages with liquid layout and let the browser take care of choosing an appropriate width.
If you know your pages will scale down nicely to mobile screen sizes, give the browser a clue that it can show the pages 1:1 without zooming by default. Include in your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
I would strongly recommend not attempting to disable zooming (user-scalable=no) as it's a useful feature that you gain nothing by blocking.