Most efficient way to prevent memory hog while loading iFrame? - javascript

I am developing a website where links open in an iFrame. This keeps everything in flow. It works pretty well on computers but on mobile devices it lags a bit specially on chrome.
When user cliks a link the website is loaded in a modal in iFrame. Is there any way I can make sure that the scrolling is still smooth on mobile devices and speed up the load times of iFrame some how?

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
try :
<meta name="viewport" content="width=device-width, initial-scale=1">
Mobile browsers like render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page.
Mobile Safari introduced the "viewport meta tag" to let web developers control the viewport's size and scale.
So your iFrame pages suppose to have the meta tag.

Related

Make a website load with browser zoomed at 1:1

I know similar questions have been asked but I have found no solution of any kind for my issue. I am building a mobile web app that has a google map embedded into it. My issue is that if a user double taps on it to try and zoom the map (which basically takes up the whole screen) it, in some cases, zooms in the browser instead of the map. Then the trouble is that the user is unable to zoom back out. Using two fingers to zoom out passes the event to the map instead of the browser and then renders the web app useless. Reloading the page keeps it zoomed in. I understand that browsers typically don't allow the script to change the browser zoom because 'controlling UI for the user is a bad idea' but in this situation I am saving the user. I don't want to do it while viewing the page, just either on load (the user will undoubtedly try and reload when they can't view/use the web app right) or on a button click.
To the best of my knowledge after quite a bit of googling on this, it is indeed not possible to change the browser zoom once the page has loaded. However, you can make a request to the browser, prior to loading the DOM, to start at a certain zoom level and/or to limit the zoom. Here is the meta tag I used to do this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
I think for the most part the attributes are pretty self explanatory, and if you are needing more/different control I'm sure there are more options to play with. Also, keep in mind this is also entirely up to the browser on whether or not it wants to follow this.

Trouble figuring out why my site takes up half the screen on iphone

I haven't tested it on an android device yet because I don't have one, but when I visit my site on my iphone it looks like the image below. I can't figure out why it loads like that. The site is completely responsive, and I have this in the header:
<meta name="viewport" content="width=device-width, initial-scale=1">
Inside the <header> element of your site, in this div:
<div class="header-ads f-right">
There is a 728x90 google ad, which although it is not visible on your page, is still there and is widening your page and making the rest of your content scale down.
Removing that google ad fixes the issue.
Usually this is because there is some element on the page which is wider than your main content column. Later iPhones tend to zoom out to accomodate this additional content.
Check all the element widths and ensure that none are hard coded values. Use width:100% for full width responsive content.

How to view full site in mobile devices instead of mobile view

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

mobile version of website doesn't fit horizontally

I'm trying to produce a mobile version of my website, but have encountered one problem:
The the whole website fits properly on the computer (with an example browser width of 480px) but leaves space on the right when viewing on my mobile phone (regardless of the browser I used). So the whole site looks good, but you can scroll "out of the website".
I first tried to disable horizontally scrolling, so I included this line:
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
To disable the (still scrollable!) space on the right I added this to my "mobile.css":
It worked on the computer, but not on my mobile.
body{
width: 100%;
overflow-x: hidden;
}
My website is avaiable here: my mobile website
My mobile.css file is located here: my "mobile.css"
I have tested the website on following mobile browsers:
Google Chrome
Dolphin
The default android browser
I originally wanted to avoid Javascript, but if there is a javascript solution, please don't hesitate to post it!
If you want your layout to be mobile friendly, it's best to be thinking about this right from the beginning. So, for example, if you are going to set fixed widths on elements (which I don't recommend), such as—
#back-menu-left {with: 500px;}
you need to ask yourself what will happen to this on a small screen. So, either don't set that width, or immediately write an #media rule to override it on smaller screens.
(I didn't check through the rest of your code, just stopping when I found one oversized element. Best to check and see if there are any other overwide elements like that.)

Ignoring Orientation

I am building a web application for iPhone. Since the application shows different content while in different orientations, the built-in animation between the two orientations animates the original content as well.
For better result, I would like to disable the animation between the portrait and landscape. Is there a way to do it for web app?
I have checked the <meta> tag but there is not a relevant one.
Thanks for any help!
Felix
I don't think this is possible. The only option there is for handling orientation in using viewport.
From the documentation (found here: http://developer.apple.com/safari/library/documentation/appleapplications/conceptual/Dashcode_UserGuide/Contents/Resources/en.lproj/Dashcode_UserGuide.pdf), it states:
Viewport
The values in this section control how users can view
your mobile Safari web application
when they use it on iPhone or iPod
touch. When users change the device
orientation from portrait to
landscape, webpages can get scaled to
fit the new screen orientation. The
two options for the Orientation value
are:
“Adjust page width to fit.” When you choose this option, your web
application resizes (that is,
increases or decreases in width) when
the device orientation changes. This
option is generally recommended for
mobile Safari web applications,
because it enhances the user’s
perception of the web application as a
standalone application and not a
webpage.
"Zoom page to fit.” When you choose this option, the width of your mobile
Safari web application does not change
when the device orientation changes,
but the scale does. In other words,
the content of your web application
will appear a bit bigger. You might
want to choose this option if your web
application has a complicated layout
that you don’t want to change in width
when the device orientation changes.
An example:
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1.0">
Br,
Paul Peelen

Categories

Resources