We are creating a RTL version of our site pages for Arabic, and have found that using solves many layout problems, but with the side effect that on mobile devices, our viewport code no longer results in correct scaling on initial load (testing on iphone). If we remove the rtl tag, the scaling returns to being perfect. Here's an sample page:
http://www.tribeofheart.org/sr/pkj_arabic_m.htm
We've tried several commonly suggested variants of viewport code for mobile devices, but so far no luck. For example, these did not resolve the issue:
Any suggestions would be so greatly appreciated.
cayugaman
Related
I have inherited a non-responsive website that was created using reactjs. It is a fairly large website, that uses fixed layout. I have been tasked with evaluating/measuring the risks/effort of making the current website responsive. As i see it, these are the different things that I need to evaluate/accomplish that will help me with my goal
Go from fixed layout to relative layout. This might include using a grid layout or something similar
Decide on the app's flow, look and feel on mobile vs desktop. By this I mean, how should the links look when viewed in a mobile phone (maybe a hamburger menu) vs links that are laid out flat in a desktop browser.
What does it take to make individual components that make up the website responsive using media queries.
My question is should I prioritize one over another for whatever reason? And am I missing anything else that I should be focussing on
Thanks
K
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 have developed a custom wordpress template based on theme twentythirteen.
The theme works fine on desktop, it's so so on tablets, and looks really wrong on smartphones.
The customized parts (the one that I made) resize correctly to take all the width possible, but the content structure that I kept of the original theme becomes more narrow that the screen. On smartphones the content width is like 20% of the available screen width.
How can I check what is wrong to fix it? I do suppose that it could be the other way around: the customizations stay too big, while the responsive layout resize itself correctly, with the result that the mobile browser scales everything to fit and I get my changes fine and the responsive part very small.
In that case, how could I fix the resize of my custom parts to fit nicely?
I looked for remote debugging and I solved my issue using this solution:
https://developers.google.com/chrome-developer-tools/docs/remote-debugging
have managed to get jQuery Isotope and Zurb Foundation playing reasonably nicely but for some reason, at certain widths, when there is plenty of room for three columns (there should always be room in Foundation's responsive grid), only one or two columns display.
Here is a link to an example http://codepen.io/anon/pen/yraxh
Has anyone managed to get an example of this working with Foundation or Twitter Bootstrap, so that it works nicely within their grid?
Thanks.
I would also give "Packery" a try. It works better with percentage based layouts. It does not have all of the same features as Isotope but will most likely serve its purpose.
http://packery.metafizzy.co/
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.