Content not showing well on mobile - javascript

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.

Related

mobile navigation wont responsive

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

How to fix overflow issue when zoomin on desktop(mobile responsive website)

I am implementing a plugin where users can zoom in and out of web content as they wanted. The plugin is going to be implemented to any mobile responsive websites.
I implemented the zoom in using
For FireFox
$('body').css('MozTransform','scale(2)');
For Chrome
$('body').css('zoom', ' 200%');
I have attached the images at the bottom.
Here right and bottom black bar is plugin part.
The problem is Desktop zoomin view.
Overflow happen and contents overflow are hidden. So when users click zoom in button on desktop, I would like to show zoomin version of mobile not zoomin version of desktop view.
I tried to fix this by changing or adding viewport metatag using Javascript.
<meta name="viewport" content="width=400, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">
Here 400 is width of mobile device.
But it changed nothing.
Seems it can be easily solved if I can set device-width using Javascript, but not found solution yet.
I have been working on this issue for 2 days and anyone who have experienced this field, appreciate your help!
Is it even possible?
Desktop original view:
Desktop zoomed view:
Mobile original view:

Angularjs ui grid has poor resolution on ipad

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>

Elements do not resize after orientation change in mobile

I know this is an old question, but after trying all the proposed methods, nothing seems fit.
Basically, I built this webpage, it looks fine when just loaded with a mobile device, but after screen rotation the size stays the same, (which it should not!)
1:
The first method I tried is adding the meta tag:
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=1" />
But apparently this does not work
2:
Then I tried window.location.reload
This works! Just perfect. But it basically reloaded the whole page, and all the previous setting will be reset to the default, this is not what I want!
3:
I see someone suggesting writing two sets of css, one for landscape and one for portrait. However, this is a lot of work right?
And, in my css I did not set a lot of explicit height and width anyway. Usually it's default, and sometimes in percentage. Is this a problem?
#
It will be great if someone explain a little what actually happens when the screen rotate? Why elements are not resized properly? And on contrary, why they will be resized properly if a reload event is triggered?
This depends on which mobile browser you're testing on; some mobile browsers, notably IE10, don't report a change in screen size when the orientation changes. However, as you found out the browser does recalculate the screen size when the page is refreshed.
If you can tell us about the browser, maybe we can help more?

HTML5 video frame by frame advance and rewind problem on iPad

I have ran into a problem trying to do frame by frame advance with html5 video on the iPad.
I have a test page up here
http://playgr8sports.com/ipad/videotest.html
With the back and forward buttons using the html 5 video tag.
This works great exactly how it should do in Chrome. It jumps through at 0.03 sec per click.
But when I try it on the iPad, it jumps random chucks of seconds and is no longer frame by frame.
All I can find is that it has something to do with the iPad not handling "currentTime" in javascript very well.
I cannot find any work around. Any help or insights would be greatly appreciated.
Thanks
It looks like this is a bug with the current 4.2 SDK. I have 4.3 Beta installed on my iPad and it works great on here. There are a few issues I've seen thus far with the 4.2 browser that are fixed in 4.3
Also add this to your page:
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
will help limit the zooming in and out deal when clicking on the links and not quite hitting them.
I'll check for any work arounds, but seeing as it's a version issue, might not be any..

Categories

Resources