I am currently working on a project using node.js and handlebar.js.
What I want to implement is to detect the screen size and render other partial.
I don't know what to do with conditional rendering based on screen size in handlebar.js.
I'd appreciate it if you could give me a hint on what to do.
Related
I know we can use media query to change the css for different sizes.
My question is: is it possible to change to a totally new page layout (or View in MVC) when window size, say when width < 500? Assume the controller is the same.
Kind of like: get the window size in the view, then decide what layout to use.
I know this is not a good way, but is it possible?
Thanks
Yes it's possible, by detecting screen size by js code and load the suitable content
screen.height;
screen.width;
I am studying CSS best practices and methodologies like OOCSS and SMACSS to use in a medium scope project that uses Twitter Boostrap 3 and LESS. I'm starting to get a grasp of these methods but I have some trouble to find out how to handle responsive design and CSS modules relationship.
For example let say I have a button module with all different kind of buttons used in the project (color, shape, size). How could I make the button change depending of the device. The same button should be large in mobile and a normal in desktop.
Following OOCSS I should have 2 skin classes like btn--default and btn--large. But as the HTML is the same for each device I can't switch this class in the HTML. Also using a media query in the module's CSS that would change the size of the button depending of the device size doesn't seem a good idea as I would be coupling the module with this specific need (and what if I want a normal button in mobile later?).
As an other example, I have product section module that have different possible layouts (vertical / horizontal). What if I want to use the vertical layout in desktop and the horizontal in mobile. I'm facing exactly the same issue. I can easily create 2 different submodules (product--horiz, product-vert) but I can't change them.
I could use javascript to switch classes but it doesn't feel right and would break the design with JS disabled. You could tell me that maybe the design is not right if an element is changing so much from one device to another but it would be a real limitation to restrain this.
So what are your thoughts about this issue. Is there any generalised practice used to face it?
To use your example for buttons:
Mobile is also tablet and tablets come in a variety of viewport sizes that are just as large as desktop. Media queries are not detecting features, like touch, so making a media query is only for visual at that viewport size. It's best practice to use large buttons and large click areas for fat fingers for every device unless you do feature detection with js such as .touch .btn- {big styles}. I use a little script to put .no-touch and .touch on my html, but I don't bother making larger areas just for .touch. I make them for everything if at all possible.
Your base button style should be defined in the button module in your 'modules.scss'. Apply any styles here that will transcend across all buttons. Then handle the differences in your smacss 'states.scss' file (compiled last). You should have one 'button' section in your states file in which you handle media queries and unique classes that will alter the appearance of the button. Hope that helps, I can elaborate more if you need.
We’ve been looking for reporting components, and we’re having difficulty a report designer that will render reports properly on both phones and computers. We want the report to display in the same way on different screen sizes (desktop and phone), or at the very least, display on both without clipping on the phone. Our thought is the easiest way to lay out such a report is for the report designer to specify table and column sizes as a percent of the width (sort of like HTML tables) rather than hardcoded pixel sizes. So when my page is resized, my report (and content elements) also gets resized, and it continues to fit.
We tried Telerik Reporting but unfortunately they don’t support this feature. They also don’t support the feature where report is resized when window is resized. The size you lay out is the size it is. They indicated they have something that will come out in beta soon, but have given us very few details. We tried the demo for Infragistics, and it seems to have the same limitations.
Is there anything else in the development space that will allow us to produce reports with more “fluid” layout, or in the very least, zoom in on the phone instead of clipping?
is twitter bootstrap an option? tb supports responsive design which will make easier to adapt your report to any device, you just will need to adapt your media queries
kendo ui supports responsive design you may take a look, if bootstrap is an overkill you should try a separate jquery UI or JS library that helps you out with a fluid layout
hope that helps
I'm newbie for developing mobile website. I very confused between two methods because I dont have any experience this it. Whats more better between two methods: css query when we using all of width device in css file or using jquery mobile that use php technique for differented user that use desktop or mobile [user->php?->mobile use jquery mobile/desktop use css standard]?
Many thanks for this answer
I will classify methods by their importance, from most important one to less important:
Client side detection
Using Modernizer javascript library to detect mobile / desktop environment
Server side detection
Using Modernizer Server or WURFL. Little complex then first solution but much more detailed (if you need more data about used device)
CSS media queries
Bad solution to detect desktop /mobile devices. Current mobile devices can have screen resolution equal to desktop platform
JavaScript based browser sniffing
Worst solution possible. Specially if you want to make distinction between smartphones and tablets.
To find more about this solutions, read my other article/answer with examples: https://stackoverflow.com/a/15055352/1848600
I have to post an answer in here since this comes first in search engines and accepted answer is not accurate.
There are two main concerns regarding responsive designs:
Content: Content should be restructured based on the width/height of the view port so the user can view the content without the need of constant zooming in and zooming out. This needs to happen solely based on the resolution of the view port regardless of the device. It could be a mobile device or a small window in desktop. This mainly involved the look and feel of the website and it is absolutely fine to use media queries. Even IMHO it is the best to use media queries to have the separation of concerns between your view and logic. No web designer likes to see random width or height showing up on their html elements during debug without knowing where are they coming from. Media queries will help you to resize the elements and show or hide them; however, in some situations you may need to move elements around; I usually do these using ng-if or ng-switch in angular js in combination with modernizer.
Functionality: If you need to turn on/off features based on the device functionalities, do not depend on the viewport specifications; use the vast libraries available in JS.
On a side note smartphone browsers seem to render at far lower resolution than actual device screen dimensions. Bust out a quick JS to show you your window resolution and run it on your phone.
Example: Chrome runs at 360x640px on my android screen of 1440x2560px.
I have been looking into responsive design using Omega subthemes. It seems very powerful when combined with the context and delta modules. However, I am having difficulty understanding how to selectively remove parts of a page in a responsive website. When I say remove, I don't mean hide, but actually prevent the specified content from rendering (that way a mobile browser doesn't have to waste time downloading content which is never displayed).
Omega provides the ability to apply different CSS to a page based on browser size (by using media query tags). Delta and context modules to be used to change the arrangement of page elements, or even remove page elements, based on certain conditions. However, I have not been able to work out how to combine the two.
For example, is it possible to, not only apply different CSS at different browser window sizes, but also prevent certain page content being rendered at the same time?
I have not been able to find any information on this. I am guessing since page content is rendered on the server side and media queries work on the client side, that it is probably not possible. I would be interested to know if anyone has any ideas on how I could achieve this.
You should take a look at the Context Breakpoint module. It allows you to set Context conditions based on the end-users browser size, aspect ratio and resolution.
http://drupal.org/project/context_breakpoint
Not sure if works for you but when I do a display: none - everything disappears and the surrounding divs shuffle nicely:
#include breakpoint($phone){
.l-header_search {
display:none;
}
}