I am using angular-ui-grid (http://ui-grid.info/). Version 3.1.1.
When it is displayed on the computer screen, it displays clearly. When I load it on the ipad it looks blurry. I think it is something to do with the retina screen. Is there any way to fix this so that the text in the grid displays clearly?
UPDATE: I am not sure if it is to do with the retina screen. On a Mac with retina display, it seems ok.
I sorted it out. I used the following meta tag on the page and it looks a lot nicer.
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
Related
Hey im working on a website for a client, however i think ive missed out something that is really annoying me atm.
http://www.enlock.co.nz/asp-web/source/index.html
here is the preview im providing for client as a small design mockup. You can notice that on web if you resize the page it will change and be responsive however on mobile it will display just as web does without changing to the smaller screen navigation.
also when the page is zoomed in on mobile it doesnt resize.
How would i accomplish this way of makig this change for mobile?
just so your aware i am not an extremely experienced web developer, i am still studying and was given this project by a family friend to do for them.
This is basically the same as what i have done for responsiveness, as shown in w3Schools:
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
Thank you!
For responsive websites you need to include this in your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
--- the responsive meta tag
I'm having issues with the web I'm working on mobile devices. In desktop looks perfect, also I resized the browser to the lowest width and still looks great, but on mobile is showing as a white big box to the right, like if is another content. Mobile View
As I said before on desktop it looks perfect, even if I resize the browser to the lowest. Desktop View
Honestly, I don't know what the problem is, I would appreciate the help a lot.
I found the issue, was this line <meta name="viewport" content="width=device-width, initial-scale=1.0">.
I changed the number of the inital-scale to 0.5 and it worked perfect, i dont understand why. I would appreciate if someone explane me the function of the initial-scale.
Thanks.
When viewing my site on mobile device, the site is automatically viewed in mobile version, like the image i have attached below
But i need to view it in desktop view like the image below.
In other words, how to disable mobile view when the site is viewed in mobile device and use the desktop view instead?
It's hard to tell with the information given, but perhaps you're using the meta viewport tag:
<meta name="viewport" content="width=device-width">
If you have something like that in your code, remove it. If your website isn't designed to be responsive, then adding in the meta viewport tag will awkwardly zoom users in.
If you don't want your side responsive, you can manually set a width for the viewport. Add a meta tag like this into your html:
<meta name="viewport" content="width=1024">
where 1024 should be a width that your site looks good. With this number, you can fine tune the appearance of your site.
Also remember to remove any other viewport definitions(especially any width=device-width).
You may have a look at this article: http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design .
If your desire is just to view it in desktop mode / full site for testing (that's what it sounds like to me) and not permanently disable mobile view, than a number of browsers support Desktop view: Android Chrome -> tap on the top right three dots, select 'Request desktop site'.
If you are using this metadata ,just remove it and the site won't be responsive
<meta name="viewport" content="width=device-width">
otherwise you can add metadata for setting your viewport size :
<meta name="viewport" content="width=your-size-in-number">
You may want to read Responsive Web Design - The Viewport
I've a problem with a website I'm designing at the moment that when it's orientation changes on an iPhone from portrait to landscape everything scales correctly for the landscape view. But when I go back to portrait, the view is like the below.
It doesn't scale back as it should; like the initial view.
I know this is a known issue on WebKit and a possible solution is explained here but it doesn't seems to be working for me since I've the following meta tag set on my page:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I know there are also some JavaScript solutions but shouldn't the above code suffice? What am I missing here?
P.S. this situation is a little bit better on Chrome for iOS on an iPhone again but then again not very well. Chrome properly scales the site when going back to portrait from landscape but it also keeps an unnecessary width from the landscape view for the portrait view as well the when I get back to portrait on Chrome I can move the site horizontally.
I assume this has to do with the retina display and thus everything is twice as small as it should be on the iPhone.
This is the site I'm working on: http://share-the-secret.com/
If you resize the site horizontally to two grid block, that's how it is supposed to look on the iPhone. Currently on the iPhone you see the four grid layout.
I do not want to use media queries to give a custom size for all the elements on the iPhone.
Is there an easier fix for this?
Thanks!
Found the solution!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">