I tested the following problems using a MacBook Pro and then a Raspberry Pi as web servers, both resulted in the same issue. I built a website and am currently port forwarding it and whenever I access it by typing in the private ip address of the server (whether the server was my MacBook Pro or Raspberry Pi), everything works fine, but when I access my site through the port forwarded public IP, there are two problems that occur that did not occur when viewing the site via private ip address:
Problem 1) Let’s say my website is “mysite.com”. If I type in “mysite.com/about” in the URL address bar it goes to that “about” page, and the URL correctly says “mysite.com/about”. But if I am on the home page of “mysite.com” and I click the “about” tab up on the navigation bar that I made instead of typing the request into the URL address bar, it goes to the correct page, but still displays the home page “mysite.com” as the URL when it should say "mysite.com/about". I am using AngularJS but I've built my website as a multipage application, and yes I used target=“_self” in my links for the tabs in the navbar, in which leaving out would result in a broken navbar.
The sections of code related to my navbar:
app.config(['$locationProvider', '$httpProvider', function($locationProvider, $httpProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: true
});
}]);
and
<li ng-class="{active: isActive('/')}"><a href="/" target="_self">Home</a></li>
<li ng-class="{active: isActive('/about')}"><a href="/about" target="_self">About</a></li>
<li ng-class="{active: isActive('/news')}"><a href="/news" target="_self">News</a></li>
and
app.controller('NavController', ['$scope', '$location', function($scope, $location){
$scope.isActive = function(destination){
return destination === $location.path();
}
}])
and in my html head I have:
<base href="/">
and in my .htaccess I have:
RewriteEngine on
RewriteRule ^about$ index.php [L]
RewriteRule ^news$ index.php [L]
ErrorDocument 404 /index.php
Problem 2) The window.innerHeight and window.innerWidth returns much larger numbers now than when accessing it within my wifi private ip. So for example on my iphone, the window.innerWidth returns a size of 320 when accessing it via the private IP, but returns a size of 980 when accessing the same page through the public IP that I am port forwarding it to. Yet, the window.screen.width remains unchanged. As a result, the port forwarded site's layout is different and broken. It's as if <meta name="viewport" content="width=device-width, initial-scale=1.0"> is being ignored when viewed through the public IP.
Thanks in advance for any help or resources!
The problem was not in the code, but in the fact that I was doing a frame redirect from my ddns to my domain name with 1&1. Viewing my site with either the public IP or ddns in my URL Bar resulted in the correct layout, but viewing it with my 1&1 domain name in the URL bar resulted in a messed up layout. After realizing that the <meta name="viewport" content="width=device-width, initial-scale=1.0"> should be keeping the iPhone window.innerWidth to 320 preventing it from 980, I realized that the meta tag must be getting overwritten somehow. I viewed source of my domain name, vs my ddns, and sure enough the meta tag from the page of my domain name was not at all what I had written... the frame redirect was wrapping my code in the meta tag of my domain with 1&1 resulting in the two problems that I was getting: 1) navigation throughout my site was all broken, 2) viewport code was no longer in my meta tag. So I am keeping this question up for anyone that ever has the same problem as I did. Someone out there that is running a home server and is trying to connect their ddns to their domain, a frame redirect is not the way to do it. Currently I am having to connect my public IP directly with my domain until I figure out how to use my ddns as the name server if that is possible. Currently looking into CNAME supposedly that is what I should be doing.