先放演示效果吧。
手机演示效果(需你的ISP支持iPv6):


电脑演示效果(本页右下角也有噢):

今天早上突发奇想想到这个功能,在网上查了一些(关键词:how to detect users using iPv6),看了看stack overflow,找到很多 真-iPv6 站的解决办法:

如通过filtervar过滤iPv6地址或者用stropy找“:”符号。给一个实例

$header_info=get_headers('//ipv6.niuzhaohang.top/test/imgtest.png');
if(filter_var($ip, FILTER_VALIDATE_IP, FILTER_FLAG_IPV6)) {
echo "IPV6 valid.";
echo $_SERVER["REMOTE_ADDR"] ;
echo $header_info[0];
} else {
echo "Not valid.";
echo $_SERVER["REMOTE_ADDR"] ;
}

但是我尝试了一下,直接访问域名的话,一般是会返回一个iPv4的地址,而且上边代码的header_info返回的状态码是服务器去访问得到的状态码,无法根据这个做判断,并且现在还是一个iPv4的时代,我们的域名一般都是直接A到iPv4上边的,单独做iPv6适配现在还划不着,所以想到了个歪主意,下面公布一下哈。

首先是思路,很简单,User通过iPv4访问本站,本站上边放一张iPv6的图片,如果User支持iPv6,则返回图片;如果User不支持iPv6,则返回空白。

下面是手机版代码(淡出效果消失)

<script type="text/javascript" src="https://blog.niuzhaohang.top/jquery/2.0.0/jquery.min.js"></script>//需要jquery库做fadeOut
<script>setTimeout(function() {
$("div[class=6668]").fadeOut()
},6000);</script> //设置定时fadeOut
<div class="6668" style="width: 15%;left: 34%;top: 5%;z-index: 52000;position: fixed;">
<img src="https://ipv6.niuzhaohang.top/test/img3.png" height="30px" id="imgs" onerror="javascript:this.style.display='none';" />
</div>//设置悬浮&若User支持iPv6则显示图片,若不支持则display=none

这个是电脑版代码(右滑效果消失)

<script type="text/javascript" src="https://blog.niuzhaohang.top/jquery/2.0.0/jquery.min.js"></script>//需要jquery库做animate
 <script>setTimeout(function() {
     $("div[class=6668]").animate({right:'-320px'});
   },6000);</script> //设置定时fadeOut
<div class="6668" style="width: 15%;right:0 ;bottom: 0;z-index: 52000;position: fixed;">
<img src="https://ipv6.niuzhaohang.top/test/img5.png" height="100%" id="imgs" onerror="javascript:this.style.display='none';" />
</div>//设置悬浮&若User支持iPv6则显示图片,若不支持则display=none


同时我们也解决了图片不能访问的话会出现裂图的情况,很简单对吧~